Блог

У меня проблема с моим выпадающим меню для входа и регистрации. У меня есть функция, которая добавляет класс, который скрывает все мои ссылки из заголовка, кроме первой (название сайта), и помещает кнопку, которая onClick показывает их. Но эти ссылки не будут отображаться в блоке, они всегда встроены независимо от того, что я делаю, и они нажимают на дочерние элементы, повреждая весь дизайн. Должен ли я сделать отдельный div только для этих двух ссылок? Но тогда этот div исчезнет из поля зрения. Я действительно больше не знаю, что делать. Это мой html:

       <div className="wrapper">
        <div className="brand" id="myTopnav">
          <a href="/#"><h1>{carrot}Plan your meal</h1></a>
   //this i want to hide  <a href="/#"><h3 className="login">Log In</h3></a>
   //this i want to hide  <a href="/#"><h3 className="signup">Sign Up</h3></a>
          <button className="icon" onClick={this.handleClick}>amp;#9776;</button>
        </div>
  

Это моя функция:

   handleClick() {
    var x = document.getElementById("myTopnav");
    if (x.className === "brand") {
      x.className  = " responsive";
    } else {
      x.className = "brand";
    }
}
  

Это мой @mobile css:

 .brand a:not(:first-child) {
  display: none;
}
.brand button {
  display: none;
}
.brand button.icon {
  float: right;
  display: block;
}
.brand h3 {
  font-size: 10px;
}
.brand h1 {
  font-size: 22px;
}
.brand.responsive {
  position: relative;
}
.brand.responsive button.icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brand.responsive a {
  display: block;
  text-decoration: none;
}
.login {
  border: none;
}
  

Может быть, мне следует переписать все ссылки и сделать их ul?
Заранее благодарю вас.

Это мой репозиторий на GitHub: https://github.com/Meret12/Planyourmeal и веб-сайт проекта (кнопка отображается ниже 767 пикселей) https://awcorp.net

Ваши h3 внутренние ссылки перемещаются вправо, поэтому они находятся вне HTML потока, поэтому <a> они отображаются как block , но без содержимого.

Просто добавьте:

 @media (max-width: 767px) {
.brand h3 {
    float:none;
}
}