Navbar响应式溢出问题：汉堡按钮无法隐藏导航链接

核心问题分析 #

1. 导航栏隐藏定位错误：你设置的right:-100%是相对于父元素.navbar的宽度，而非导航栏自身宽度。由于.navbar存在左右margin，宽度不是100%视口宽，导致导航栏无法完全移出视口，甚至会跑到页面左侧，引发横向滚动。
2. 横向溢出隐藏不彻底：仅给html设置overflow-x:hidden，部分浏览器中body仍可能出现横向滚动条。
3. CSS语法错误：媒体查询中.navbar .nav-links ul的margin:2rem 1.5缺少单位，可能导致内部布局异常。

修复代码 #

1. 修改媒体查询中的导航栏定位

@media (max-width:920px) {
    #menu-btn {
        display: inline-block;
    }
 
    .navbar .nav-links {
        position: absolute;
        top:101%;
        right:-30rem; /* 改为自身宽度的负值，确保完全移出视口右侧 */
        background-color: hsla(209, 54%, 52%, .7);
        width: 30rem;
        height:calc(100vh - 9.5rem);
        transition: .4s ease-in;
        z-index: 1001; /* 确保导航栏在页面其他元素上方 */
    }

    .navbar .nav-links.active {
        right:0;
    }
    .navbar .nav-links ul {
        display: block;
        margin:2rem 1.5rem; /* 补充缺失的单位 */
        padding:.5rem;
        font-size:1.2rem;
    }
    .navbar .nav-links ul li {
        padding: 2rem 0;
    }
}

2. 给body添加横向溢出隐藏

修改主CSS中的body样式：

body {
    background-color:#dfe3ee;
    overflow-x: hidden; /* 新增，彻底隐藏横向溢出 */
}

修复说明 #

• 使用right:-30rem替代right:-100%：因为导航栏固定宽度为30rem，这个值能让导航栏完全藏在视口右侧外面，不会触发横向滚动。
• 给body添加overflow-x:hidden：和html的设置配合，覆盖所有浏览器的横向溢出情况。
• 补全margin单位：避免浏览器解析错误，保证导航栏内部列表的正常布局。

内容的提问来源于stack exchange，提问作者Jove Pascual