手机上的humbarger图标无法打开导航

Question

我正在构建一个简单的 WordPress 主题，当浏览器缩小到移动设备大小时，导航中会出现 humbarger 图标，但它不会按预期打开导航。我尝试了一些代码，但似乎无法找出问题所在。任何帮助将不胜感激。因为这是一个 WordPress，所以我无法在这里摆弄：

appd4b.com 是现场演示

<header>
 <nav class="navigation" id="myTopnav">
    <div class="logo">
      <img src="https://appd4b.com/wp-content/uploads/2024/04/WEBD4B-removebg-preview.png" alt="Site Logo" width="15%" height="15%">
    </div>
    
    <ul class="menu-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#portfolio">Project</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <a href="javascript:void(0);" class="humbarger icon" onclick="toggleMenu()">
      <i class="fa fa-bars"></i>
    </a>
  </nav>
</header>

然后在js文件中我有

function toggleMenu() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navigation") {
    x.className += " responsive";
  } else {
    x.className = "navigation";
  }
}

CSS 相当简单

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f8f8f8; /* Adjust as needed */
}

.logo {
  flex: 1;
}

.logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.menu-list {
  flex: 1;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.menu-list li {
  margin: 0 10px;
}

.menu-list li a {
  text-decoration: none;
  color: #333; /* Adjust as needed */
}

.humbarger {
  display: none; /* Hide by default */
}

@media screen and (max-width: 768px) {
  .menu-list {
    display: none; /* Hide menu on smaller screens */
  }

  .humbarger {
    display: block; /* Show hamburger menu on smaller screens */
    cursor: pointer;
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
  }

  .bar2 {
    width: 20px; /* Adjust to create hamburger effect */
  }
}
@media screen and (max-width: 600px) {
  .navigation .menu-list {
    display: none;
  }

  .navigation.responsive .menu-list {
    display: block;
  }
}

我正在尝试使用 javascirpt 但如果 jquery 更好我会这样做

Answer 1

属于相关部分、产生效果的 CSS 不存在于

style.css

中。包含它，它就会起作用。 此外，菜单项的可见性应应用在

768px

下方，以便

.hamburger

菜单有意义，如下所示：

@media screen and (max-width: 768px) {
  .menu-list {
    display: none; /* Hide menu on smaller screens */
  }

  .humbarger {
    display: block; /* Show hamburger menu on smaller screens */
    cursor: pointer;
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
  }

  .bar2 {
    width: 20px; /* Adjust to create hamburger effect */
  }
  .navigation .menu-list { /*missing from here*/
    display: none;
  }

  .navigation.responsive .menu-list {
    display: block;
  }
}