如何实现响应式导航菜单？点击按钮后菜单不显示问题排查

问题根源 #

1. 兄弟选择器顺序错误：CSS的~是后续兄弟选择器，只能选中当前元素之后的同级元素。你的HTML里导航栏navbar在复选框toggler前面，导致#toggler:checked ~ .navbar无法匹配到目标元素，点击汉堡按钮后菜单样式不生效。
2. 重复ID违规：多个导航链接使用了相同的id="nav-link"，ID在HTML中必须唯一，应统一改用class控制。
3. 图标依赖缺失：如果未引入Font Awesome样式文件，汉堡菜单图标无法正常显示。

修复后的HTML代码 #

<header>  
  <div class="navigation" id="navigation">
   <h4 class="logo">
     <span class="fashion">Fashion</span><span class="com">.com</span>
   </h4>
  <div class="offer">
    <p class="offer">Get Up To <strong>30%</strong> Off New Arrivals                                    
    <a class="shop" href="#">Shop Now</a></p>
  </div>

<!------------------ Navigation-------------------->
  <!-- 将复选框移至navbar前方，确保兄弟选择器能匹配 -->
  <input type="checkbox" name="" id="toggler">
  <label for="toggler" class="fas fa-bars"></label>
  <nav class="navbar">
      <a href="#home" class="active nav-link" aria-current="page">Home</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#collection" class="nav-link">Collection</a>
      <a href="#contact" class="nav-link">Contact</a>
      <a href="" class="nav-link" id="icon-link"><ion-icon name="person-sharp"></ion-icon></a>
      <a href="" class="nav-link" id="icon-link2"><ion-icon name="cart-sharp"></ion-icon></a>
      <a href="" class="nav-link btn red">Log in/Sign up</a>
    </nav>
  </div>
</header>

修复后的CSS代码 #

/* 隐藏复选框，仅通过标签触发点击 */
.navigation #toggler {
  display: none;
}

/* 移动端导航样式，可根据你的断点调整媒体查询宽度 */
@media (max-width: 768px) {
  .navigation .fa-bars{
    font-size: 1.2rem;
    color: #121212;
    padding: .5rem 1.5rem;
    cursor: pointer;
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem; /* 将汉堡图标固定在右上角 */
  }
  .navbar{
    position: absolute;
    top:100%;
    left: 0;
    right: 0;
    border-top: .1rem solid rgba(0, 0, 0, .1);
    background-color:whitesmoke;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.3s ease; /* 添加过渡动画，让菜单展开更流畅 */
  }
  .navigation #toggler:checked ~ .navbar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  .navbar a {
    margin: .4rem;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem;
    background-color:white;
    display: block;
  }
}

/* 桌面端导航样式（按需添加） */
@media (min-width: 769px) {
  .navigation .fa-bars {
    display: none; /* 桌面端隐藏汉堡按钮 */
  }
  .navbar {
    clip-path: none; /* 桌面端正常显示导航 */
    position: static;
    background-color: transparent;
    border-top: none;
  }
  .navbar a {
    display: inline-block;
    background-color: transparent;
    margin: 0 1rem;
    padding: 0;
  }
}

额外提醒 #

确保已引入Font Awesome的本地样式文件，或替换为你项目中使用的图标方案，否则汉堡菜单图标无法显示。

内容的提问来源于stack exchange，提问作者Soumita Bandyo