移动端优先设计：桌面视图导航栏菜单无法显示问题

问题解决思路与修改方案 #

1. 桌面端菜单不显示的修复

默认样式里.navbar被设置了top: -500px和绝对定位，媒体查询只调整了flex排列方向，但没重置定位和top值，导致菜单被移出可视区域。

修改媒体查询中的.navbar样式：

@media screen and (min-width: 450px){
    /* 保留原有样式 */
    header{
        padding: 15px 2%;
    }
    .logo{
        height: clamp(1.5em, 2.5em + 1vw , 3em);
    }
    .title{
        background: -webkit-linear-gradient(180deg, #9ca8c8, #002989);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        font-size: clamp(.2em, .85em + 1vw , 2.5em);
        display: flex;
        margin-left: .6em;
    }
    .navbar{
        flex-direction: row;
        /* 添加以下代码重置定位 */
        position: static;
        top: auto;
        /* 重置高度，取消移动端全屏菜单设置 */
        height: auto;
    }
    .navbar a{
        font-weight: 500; 
    }
    #menu-icon{
        display: none;
    }
}

2. 窗口尺寸切换后菜单残留的修复

从移动端切换到桌面端时，之前展开的菜单不会自动收起，且菜单按钮已隐藏无法手动关闭。需要监听窗口resize事件，自动处理菜单状态。

修改JS代码，添加resize监听：

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menu.onclick = () => {
    menu.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};

window.onscroll = () => {
    menu.classList.remove('bx-x');
    navbar.classList.remove('active');
};

// 添加窗口尺寸变化监听
window.addEventListener('resize', () => {
    if (window.innerWidth >= 450) {
        menu.classList.remove('bx-x');
        navbar.classList.remove('active');
    }
});

修改后，桌面端菜单会正常显示在header右侧，窗口尺寸切换时也会自动收起移动端展开的菜单，避免残留问题。

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