响应式汉堡菜单切换后放大屏幕导航栏错位问题修复求助

问题原因 #

你遇到的错位问题核心来自两个原因：

1. JS操作菜单时给导航栏添加了内联样式，内联样式优先级远高于普通CSS和媒体查询样式，当窗口放大超过600px阈值时，桌面端样式无法覆盖JS添加的transform、position等属性，导致布局异常。
2. 桌面端默认导航栏样式没有明确重置移动端媒体查询中新增的特殊属性，样式残留进一步触发错位。

修复方案 #

第一步：修改CSS代码 #

找到桌面端默认的.navbar样式，补充重置属性，明确覆盖移动端的特殊配置：

/* navbar 原有样式基础上补充下方内容 */
.navbar{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin: 0 1rem 0 0;
    /* 新增重置属性 */
    position: static;
    transform: none;
    top: auto;
    height: auto;
    flex-direction: row;
    background: transparent;
    width: auto;
}

第二步：修改JavaScript代码 #

在原有JS代码末尾添加窗口大小监听逻辑，当窗口宽度超过600px时自动清空JS添加的内联样式、重置按钮状态：

// 原有代码全部保留，新增以下内容
window.addEventListener('resize', function() {
    // 窗口宽度超过阈值时重置所有交互状态
    if (window.innerWidth > 600) {
        // 清空导航栏的内联transform，恢复CSS的默认控制
        menu.style.transform = '';
        // 重置汉堡/关闭按钮的显示状态
        hamburger.classList.remove('hide', 'show');
        cross.classList.remove('hide', 'show');
    }
});

可选优化建议（新手友好） #

如果希望后续维护更方便，可以把菜单展开收起的逻辑改成类控制，避免直接操作内联样式：

1. 在移动端媒体查询中加一个激活类样式：

@media(max-width:600px){
    .navbar.active{
        transform: translateX(-89%);
    }
}

2. 把原有JS中的showNav、hideNav改成类切换：

const showNav = () => {
    menu.classList.add('active');
}

const hideNav = () => {
    menu.classList.remove('active');
}

这种写法样式优先级更可控，也符合前端开发的常规规范。

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