我已經為一個我滿意的桌面創建了一個導航欄，但我決定采用移動優先的方法，所以我更改了代碼并添加了一個媒體查詢，當屏幕大于450px時，它會刪除切換菜單，但現在菜單不會在更大的設備上顯示。

導航條形碼:

header{
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    position: fixed;
    background: rgba(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 6%;
    transition: .3s;
    overflow: visible;
}
header a{
    display: flex;
    align-items: center;
}
.logo{
    height: clamp(1.85em, 2.8em + 1vw , 3.5em);
    cursor: pointer;
    margin: .2em ;
}
.title{
    display: none;
}
#menu-icon{
    font-size: 38px;
    color: var(--text-color);
    z-index: 10001;
    display: block;
}
.navbar{
    display: flex;
    top: -500px;
    left: 0;
    right: 0;
    position: absolute;
    flex-direction: column;
    background: rgba(255, 255, 255);
}
.navbar a{
    font-size: var(--p-font);
    color: var(--secondary-color);
    font-weight: 600; 
    padding: clamp(.3em, .6em + 1vw, 1em);
    margin: 0 10px;
    transition: all .40s ease;
    display: flex;
    justify-content: center;
    padding: 1rem;
    margin: 0.5rem;
}
.navbar.active{
    top: 100%;
    height: 100vh;

}

JS:

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');
};

媒體查詢:

@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;
    }
    .navbar a{
        font-weight: 500; 
    }
    #menu-icon{
        display: none;
    }
}

導航欄HTML:

<header>
        <a href="index.html"><img src="logo.PNG" class="logo" alt="logo"><h1 class="title">&#160 Name</h1></a>
        <div class="bx bx-menu" id="menu-icon"></div>

        <ul class="navbar">
            <li><a href="index.html" style="color: #002989">HOME</a></li>
            <li><a href="#about-us">ABOUT US</a></li>
            <li><a href="projects.html">PROJECTS</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li class="header-button"><a href="contact.html" id="contact-button">CONTACT US</a></li>
        </ul>
    </header>

我已經試著改變顯示設置，但是我沒有嘗試讓菜單顯示出來。我還注意到，如果我在一個較小的屏幕上切換菜單，然后將屏幕大小改為桌面，我仍然可以看到菜單(就好像它被切換，但沒有取消切換的按鈕)。