如何确保我的媒体查询侧边栏导航关闭而不影响我的主导航菜单

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