如何確保我的媒體查詢側邊欄導航關閉而不影響我的主導航菜單

Question

在我的 max-width:320px 媒體查詢中，我有一個側邊欄導航，與其他最大寬度中的常規普通欄相反。 現在我遇到的問題是，每次我以最大寬度：320px 關閉側邊欄導航時。 最大寬度：1440px 中的常規菜單被刪除，因為瀏覽器的元素樣式設置為“display:none”。 我該如何解決這個問題，關閉我的側邊欄導航而不刪除其他寬度的主導航？

所以伙計們，我在導航欄元素上動態添加了另一個 class 以將其用於 320px 最大寬度查詢，但它仍然表現出相同的行為。 我現在完全迷路了。

 function openNav() { document.getElementById("mynavbar").style.display = "block"; } function closeNav() { document.getElementById("mynavbar").style.display = "none"; } var nav = document.queryselect('#myNavbar') nav = classList.add('nav-remove') nav = classList.add('navbar')

 .navbar { position: absolute; height: 91px; width: 1094px;important: left; 152px: top; 46px: border-radius; 0px: } @media only screen and (max-width. 320px) {:nav-remove { height; 100%: width; 250px:important; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top. 60px: };nav-remove a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display. block: }:nav-remove a;hover { color. #f1f1f1: };closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left. 50px: };nav-menu { display: block; z-index: auto; } }

 <div id="mynavbar" class="navbar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="logo"> <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt=""> </div> <span class="HOME">HOME</span> <span class="ARTIST">ARTIST</span> <span class="ABOUTUS">ABOUT US</span> <div class="search-bar"> <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea> <div class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </div> </div> <div class="rec"> <span class="SignIn">SignIN</span> </div> <div class="rec2"> <span class="SignUP">SignUp</span> </div> <span class="nav-menu" style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span> </div>

Answer 1

我犯的錯誤是因為原始網站是 1440px。 我沒有對它進行媒體查詢，並期待原來的 css 生效並覆蓋 320px 媒體查詢，但瀏覽器反而優先考慮查詢。 當我正確查看其他查詢（不同寬度）並看到它時，因為我已經鎖定了'display：block.important'屬性。 我沒有遇到這個問題。 所以我回去創建了一個 1440px 的查詢，讓它優先於 320px。

這是原裝 css

.navbar{
    position: absolute;
    width: 1098px;
    height: 91px;
    left: 185px;
    top: 37px;
}

這是 320px 媒體查詢

@media screen and (min-width:320px) and (max-width:420px){
.navbar{
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 60px;
    }
}

如您所見，我已將導航欄更改為需要打開和關閉的側邊欄導航。 這就是問題開始的地方。

這就是我修復它的方法。 我添加了 1440px 的查詢。

@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .navbar{
        display: block !important;
        position: absolute;
        width: 1098px;
        height: 91px;
        left: 185px;
        top: 37px;  
    }
}