移动端视图切换时Navbar消失，汉堡图标未显示问题求助

问题描述 #

将导航栏代码应用到个人网站后，浏览器窗口缩小至移动端尺寸（≤700px）时，导航栏和汉堡图标完全消失，所有导航菜单无法访问。

问题根源分析 #

1. 汉堡按钮被连带隐藏：nav-toggle 嵌套在 Items 容器内，而移动端下 Items 默认通过 transform: translateX(100%) 移出屏幕，导致按钮也被带离可视区域。
2. 导航栏定位错误：Items 设置了 left: 200px + width: 100%，即使移除平移也会超出屏幕范围，无法正常显示。
3. 缺少桌面端按钮隐藏规则：未设置桌面端下汉堡按钮的隐藏样式，可能导致跨视图状态混乱。

修复代码 #

修改后的 navbar.js #

function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="per">
      <div className="logo"></div>
      <div className="search"></div>
      {/* 把汉堡按钮移到Items同级，避免被Items的平移影响 */}
      <div 
        className={`nav-toggle ${isOpen && "open"}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        <div className="bar"></div>
      </div>
      <div className={`Items ${isOpen ? "open" : ""}`}>
        <a href="/home" to="/home">Home</a>
        <a href="/contact" to="/contact">contact</a>
        <a href="/about-us" to="/about-us">About Us</a>
      </div>
    </div>
  );
}

修改后的 navbar.css #

/* 先添加桌面端汉堡按钮隐藏规则 */
.nav-toggle {
  display: none;
}

@media (max-width: 700px) {
  .Items > a {
    margin: 15px;    
  }
  .Items {
    position: absolute;
    top: 60px;
    display: flex;
    flex-direction: column;
    background: #7e77e1;
    left: 0; /* 修正left值，避免超出屏幕 */
    width: 100%;
    height: calc(100vh - 60px); /* 调整高度，避免覆盖整个页面 */
    transform: translateX(100%);
    transition: all .45s;
    padding-top: 20px; /* 添加内边距，让菜单不贴顶 */
  }
  .Items > a::before {
    background: transparent;
  }
  .Items.open {
    transform: translateX(0);
  }

  .per > .nav-toggle {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute; /* 固定按钮在右上角，提升可用性 */
    top: 5px;
    right: 10px;
  }
  .nav-toggle > .bar {
    position: relative;
    width: 32px;
    height: 2px;
    background: #ffffff;
    transition: all 0.45s ease-in-out;
  }
  .nav-toggle > .bar::before,
  .nav-toggle > .bar::after {
    content: "";
    position: absolute;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.45s ease-in-out;
  }
  .nav-toggle > .bar::before {
    width: 25px;
    transform: translateY(-8px);
    right: 0;
  }
  .nav-toggle > .bar::after {
    width: 32px;
    transform: translateY(8px);
  }
  .nav-toggle.open > .bar {
    transform: translateX(-40px);
    background: transparent;
  }
  .nav-toggle.open > .bar::before {
    width: 32px;
    transform: rotate(45deg) translate(26px, -26px);
  }
  .nav-toggle.open > .bar::after {
    transform: rotate(-45deg) translate(26px, 26px);
  }
}

验证步骤 #

1. 将修改后的代码替换原有文件
2. 缩小浏览器窗口至700px以下，确认汉堡图标正常显示
3. 点击汉堡图标，验证导航菜单是否平滑展开/收起
4. 切换回桌面尺寸，确认汉堡图标自动隐藏

内容的提问来源于stack exchange，提问作者Ozalp code