媒体查询触发后Hamburger Menu无法显示的技术问题求助

问题根源 #

汉堡菜单初始样式使用了高优先级选择器 body .navbar .hamburger-menu 设置 display: none，而媒体查询中仅用 .hamburger-menu 尝试开启显示。由于选择器优先级不足，媒体查询的样式无法覆盖初始设置，导致汉堡菜单仍处于隐藏状态。

修复方案 #

修改媒体查询中的选择器，使其优先级与初始样式匹配或更高：

@media (max-width: 760px) {
  body .navbar .hamburger-menu {
    display: flex;
  }
  .navbar-menu li {
    display: none;
  }
}

如果不想调整选择器，也可以临时使用 !important（不推荐长期依赖，仅作为应急方案）：

@media (max-width: 760px) {
  .hamburger-menu {
    display: flex !important;
  }
  .navbar-menu li {
    display: none;
  }
}

额外优化建议 #

1. 让汉堡菜单垂直居中于导航栏，避免固定距离导致的错位：

body .navbar .hamburger-menu {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%); /* 垂直居中 */
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

2. 直接隐藏整个导航菜单容器，比逐个隐藏列表项更高效：

@media (max-width: 760px) {
  body .navbar .hamburger-menu {
    display: flex;
  }
  .navbar-menu {
    display: none;
  }
}

内容的提问来源于stack exchange，提问作者Dino Rozing