Hamburger Menu问题：移动端导航菜单无法隐藏

在移动端无法实现显示汉堡菜单的同时隐藏导航菜单，折腾了好几个小时都没解决，求各位帮忙看看。

问题截图：

相关代码 #

CSS代码

nav {
  grid-area: nav;
  align-items: center;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  border: 3px solid rgb(0, 0, 0);
  display: inline-block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}

nav a {
  display: inline-block;
  background-color: rgb(252, 252, 252);
  color: rgb(0);
  padding: 10px 15px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for hover effects */
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background-color: rgb(140, 71, 147);
  /* Change background on hover */
  color: rgb(255, 255, 255);
  /* Change text color on hover */
  transform: scale(1.05);
  /* Slightly increase size on hover */
}


/*MOBILE*/

.toggle-button {
  position: absolute;
  top: 18.2rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: purple;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .nav {
    display: none;
  }
  .nav a {
    display: none;
  }
}

HTML代码

<nav>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <!-- Navigation Links -->
  <a href="index.html">Home</a>
  <a href="whatson.html">Whats on</a>
  <a href="businesses.html">Businesses</a>
  <a href="gallery.html">Gallery</a>
  <a href="contactus.html">Contact us</a>
</nav>

问题分析与修正方案 #

你现在的代码有两个核心问题：

1. 选择器错误：媒体查询里用了.nav（类选择器），但HTML中的导航是<nav>标签，应该用nav标签选择器。而且直接隐藏整个nav会把汉堡按钮也一起藏起来，正确做法是只隐藏除了.toggle-button之外的导航链接。
2. 汉堡按钮定位异常：top:18.2rem是固定值，会导致按钮位置偏下，应该把nav设为position: relative，让汉堡按钮相对于导航栏定位。

修正后的代码如下：

修正后的CSS

nav {
  grid-area: nav;
  align-items: center;
  background-color: rgb(0, 0, 0);
  padding: 10px;
  border: 3px solid rgb(0, 0, 0);
  display: inline-block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  /* 新增：让内部绝对定位元素以nav为基准 */
  position: relative;
}

nav a {
  display: inline-block;
  background-color: rgb(252, 252, 252);
  color: rgb(0);
  padding: 10px 15px;
  border: 2px solid black;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background-color: rgb(140, 71, 147);
  color: rgb(255, 255, 255);
  transform: scale(1.05);
}


/*MOBILE*/

.toggle-button {
  position: absolute;
  /* 修正：相对于nav定位，调整到合适位置 */
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  /* 新增：让汉堡按钮不被其他元素遮挡 */
  z-index: 10;
  /* 修正：去掉默认的a标签样式，避免影响汉堡按钮外观 */
  background: transparent;
  border: none;
  padding: 0;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: purple;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  /* 修正：只隐藏非汉堡按钮的导航链接 */
  nav a:not(.toggle-button) {
    display: none;
  }
}

可选优化：给导航链接加容器（便于后续展开功能）

如果后续要实现点击汉堡按钮展开菜单的功能，建议把导航链接放到一个容器里，方便控制：

<nav>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <!-- 新增容器，方便后续控制菜单展开/收起 -->
  <div class="nav-links">
    <a href="index.html">Home</a>
    <a href="whatson.html">Whats on</a>
    <a href="businesses.html">Businesses</a>
    <a href="gallery.html">Gallery</a>
    <a href="contactus.html">Contact us</a>
  </div>
</nav>

对应的媒体查询可以改成：

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .nav-links {
    display: none;
  }
}

这样就能实现移动端显示汉堡按钮、隐藏导航链接的效果了，后续如果要做展开功能，只需要用JS切换.nav-links的display属性即可。

内容的提问来源于stack exchange，提问作者Jessica North