Проблемы с переключением маржи

Question

Я пытаюсь создать мобильное меню с:

• закрепленным заголовком
• строкой поиска, которая появляется, когда вызывается как div под закрепленным заголовком
• div меню содержимого, которое появляется либо под закрепленным заголовком, либо под строкой поиска, если панель поиска уже открыта.

Липкий заголовок имеет высоту 50px, поэтому я создал класс для содержимого тела, который устанавливает margin-top основного содержимого на 75px. Таким образом, верхняя часть содержимого тела не скрывается за липким заголовком.

Сначала проблема заключалась в том, что margin-top показывал полный 75px, когда я вызывал либо в строке поиска, либо в div содержимого, поэтому я создал функцию с переключателем, чтобы сказать «если поиск или отображаются полосы содержимого, затем измените верхнюю границу основного содержимого на 25 пикселей. .content-closed { margin-top: 75px; } .content-open { margin-top: 25px; } Это, похоже, работает нормально. Однако у меня все еще есть две проблемы, и я потратил слишком много времени, пытаясь понять их, и не могу!

Проблема 1: Если я открою как div поиска, так и div содержимого - margin-top переключается обратно на 75, оставляя слишком большой пробел. Я хочу сказать, что «если поиск или контент уже открыт, не переключайтесь при открытии другого - продолжайте использовать .content-open». Как я могу это сделать?

Проблема 2: div содержимого занимает дополнительное место над верхней ссылкой, когда отображаются как поиск, так и содержимое. Я не могу понять, почему это происходит или как это исправить. Любые идеи?

Обратите внимание, я пытаюсь использовать CSS и JS только для максимальной совместимости.

Третья проблема, если она не требует слишком много, и кто-то может помочь. Там есть ссылка, X в строке поиска, которая закрывает панель поиска, а в форме панели поиска есть увеличительное стекло. Я хочу, чтобы X исчез, если кто-то щелкнет увеличительное стекло, независимо от того, были ли они введены или не введены в критерии поиска. Может ли кто-нибудь помочь с этим тоже? Большое спасибо.

function myFunction() {
  var x = document.getElementById("menu-contents");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function myFunction3() {
  var element = document.getElementById("main-content");
  element.classList.toggle("content-open");
}

function myFunction2() {
  var x = document.getElementById("searchpop");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

body {
  margin: 0;
}

.menutop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 50px;
  width: 100%;
  background-color: #C6CFCD;
}

.content-closed {
  margin-top: 75px;
}

.content-open {
  margin-top: 25px;
}

.menu-logo {
  padding-left: 20px;
  padding-top: 5px;
  float: left;
}

.three-lines {
  font-weight: bold;
  font-size: 25px;
  color: #1E1C1C;
  float: right;
  padding-top: 5px;
  padding-right: 5px;
  text-decoration: none;
}

.three-lines a:link {
  color: #1E1C1C;
  text-decoration: none;
}

.three-lines a:visited {
  color: #1E1C1C;
  text-decoration: none;
}

.three-lines a:hover {
  color: #ff0000;
}

.three-lines a:active {
  color: #ff0000;
}

.menu-name {
  font-family: Lato;
  font-size: 28px;
  color: #333333;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  float: right;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 20px;
}

.search-icon {
  font-size: 25px;
  color: #000000;
  float: right;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 20px;
}

#menu-contents {
  display: none;
  background-color: grey;
  padding-top: 50px;
  padding-bottom: 20px;
}

.menu-links {
  font-family: Lato;
  font-size: 18px;
  color: #333333;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}

.menu-links a:link {
  color: #333333;
  font-weight: normal;
  text-decoration: none;
}

.menu-links a:visited {
  color: #333333;
  font-weight: normal;
  text-decoration: none;
}

.menu-links a:hover {
  color: #333333;
  font-weight: normal;
  text-decoration: none;
}

.menu-links a:active {
  color: #333333;
  font-weight: normal;
  text-decoration: none;
}

.li {
  margin: 0.3em 0;
}


/* This is the search pop out */

.searchnav {
  overflow: hidden;
  background-color: #ff0000;
  margin-top: 50px;
  display: none;
}

.searchnav .search-container {
  float: right;
}

.searchnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width: 250px;
}

.searchnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
}

.xexit {
  font-family: Lato;
  font-size: 28px;
  color: #333333;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  float: right;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 20px;
}