Hamburger Navigation触发active后消失无法关闭菜单问题排查

数据老陈

2026-8-27

问题原因

汉堡菜单打开后按钮消失是CSS配置疏漏导致的，核心问题有两个：

层级冲突：全屏移动菜单.mobile-nav设置了z-index: 98为固定定位，但汉堡按钮.hamburger及其父容器header没有配置更高的z-index，固定定位的菜单滑入后会直接在层级上覆盖按钮，导致按钮视觉上消失，也无法响应点击。
显示适配缺失：汉堡按钮的三条横线默认是黑色，即便层级调整正确，按钮浮在深紫色（#12002F）的菜单背景上时，黑色线条对比度极低，几乎无法识别。

修复方法

不需要修改现有JS逻辑，调整CSS即可：

方案1（改动最小，适配原有布局）

保留你原有的汉堡按钮定位、grid布局配置，只做两处新增：

给页面header元素加高z-index，确保整个header（包括里面的汉堡按钮）永远在移动菜单上层：

header {
    position: relative;
    z-index: 99;
    /* 保留你原有header的其他样式 */
}

新增激活状态下汉堡按钮的线条颜色，适配深色菜单背景：

.hamburger.is-active::before,
.hamburger.is-active::after,
.hamburger.is-active .bar {
    background-color: #ffffff;
}

方案2（固定汉堡按钮位置，不随页面滚动）

如果需要按钮在菜单打开时固定在视口右上角不随滚动移动，直接修改.hamburger的原有样式：

.hamburger {
    grid-row-start: A;
    grid-column-start: A; 
    grid-row-end: A;
    grid-column-end: A; 
    align-self: center;
    justify-self: center;
    position: fixed;
    z-index: 99;
    top: 30px; /* 按你实际布局调整到和原位置一致 */
    right: 20px; /* 按你实际布局调整到和原位置一致 */
    width: 35px;
    cursor: pointer;
    appearance: none;
    background: none;
    outline: none;
    border: none;
}

同样搭配方案1里的激活状态白色线条样式即可。

修复后效果