React导航栏移动端汉堡菜单展开时导航项背景色未按预期生效

问题根因 #

• 定位偏移错误：移动端.nav-links设置了top: 180px、left: 51px的偏移值，菜单没有贴合屏幕边缘，无法覆盖整页
• 尺寸参数缺失：激活状态仅设置了背景色，未指定全宽、全高，无法完全遮挡下方落地页
• 层级无保障：菜单元素未设置z-index，下方页面内容会穿透显示

修复代码 #

将现有移动端媒体查询内的样式替换为以下内容即可：

@media only screen and (max-width: 500px) {
    .navbar {
        position: relative;
        /* 顶栏和展开菜单同色，形成连续视觉块 */
        background: #4D0ADB;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        /* 从导航栏底部开始铺菜单 */
        top: 80px;
        left: 0;
        /* 占满全视口宽度 */
        width: 100%;
        /* 撑满除顶栏外的剩余屏幕高度 */
        min-height: calc(100vh - 80px);
        /* 始终在页面内容上层 */
        z-index: 999;
        transition: 0.5s all;
    }

    /* 关闭状态菜单完全移出视口 */
    .nav-links:not(.active) {
        left: -100%;
    }

    .nav-links.active {
        background: #4D0ADB;
        left: 0;
    }

    .nav-item {
        padding: 15px 2rem;
        width: 100%;
    }

    .nav-icon {
        display: flex;
        position: relative;
        z-index: 1000;
    }
}

实现效果 #

• 菜单关闭时：仅保留80px高度的顶栏（含logo、汉堡按钮），下方落地页内容正常展示
• 菜单打开时：从顶栏底部到屏幕底部的全区域被紫色背景完全覆盖，无落地页内容透出，导航项垂直排布在遮罩层内

内容的提问来源于stack exchange，提问作者simple life