在桌面上隐藏 div

Question

我试图在桌面上隐藏一个 div。我尝试过媒体查询（这里是 Caroline 的解决方案：https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885）

我已将较大的导航 (.menu) 隐藏在移动设备上，但我不知道如何在桌面设备上隐藏移动导航。如果我在主 CSS 中将 mobilenav 的显示设置为“隐藏”并在我的媒体查询中显示为“阻止”，则 div 将保持隐藏状态。我猜我的代码在某个地方有问题。您的任何建议将不胜感激。这是我的小提琴：

https://jsfiddle.net/eamr662L/（网站完整代码）

这是我认为相关代码的摘录：

    mobilenav {
        display: block;
        width: 100%;
        z-index: 1000;
        background-color: #000000;
        text-align: center;
    }

    mobilenav div {
        width: 100%;
    }

    mobilenav a {
        color: #ffffff;
        text-transform: uppercase;
    }

    mobilenav a:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    mobilenav > nav > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;

    }

    mobilenav > nav > ul:hover {
        background-color: #000000;    
    }

    mobilenav > nav > ul > li {
        flex: 0 1 auto;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        transition: all linear 0.1s;    
    }

    mobilenav > nav > ul > li a + div {
        display: none;
        position: absolute;
    }

    mobilenav > nav > ul > li:hover a + div {
        display: block;
        background-color: #000000;
    }

    mobilenav > nav > ul > li a + div > ul {
        list-style-type: none;  
    }

    mobilenav > nav > ul > li a + div > ul > li {
        margin: 0;
        padding: 0;
    }

    mobilenav > nav > ul > li a + div > ul > li > a {
        display: block; 
        padding: .25rem 1.5rem;
        text-decoration: none;
    }

    mobilenav > nav > ul > li > a {
        align-items: flex-start;
        display: flex;
        padding: 1rem 1.5rem;
        text-decoration: none;
    }

<mobilenav>
    <nav role="navigation">
        <ul>
            <li>
                <a href="">
                    <div>Navigation</div>
                </a>
                <div>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li ><a href="">Research</a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">Ask a Librarian</a></li>
                        <li><a href="">Archives &amp; Special Collections</a></li>
                        <li><a href="">Exhibitions</a></li>
                        <li><a href="">Plant Information</a></li>                   
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</mobilenav>

这里是网站：

http://nybg.beta.libguides.com/

谢谢！

---

Answer 1

由于某种原因，您的移动导航似乎在桌面上将display 设置为block。您可以将display: none; 与桌面媒体查询一起使用，如下所示：

@media(min-width: 601px) {
  mobilenav {
    display: none;
  }
}

或者只是在桌面上将 mobilenav 设置为 display: none;，然后使用移动设备的媒体查询在移动设备上将 display 设置为 block：

mobilenav{
  display: none;
}

@media(max-width: 600px){
  mobilenav{
    display: block;
  }
}

工作中的JSFIDDLE。

也许您应该在桌面和移动设备上使用相同的菜单，并使用媒体查询来设置不同的样式。

另外，我建议您将 css 放在外部文件中，而不是像您现在在 <style></style> 之间的网站上那样。

Answer 2

尝试添加媒体查询：

@media (min-width: 1200px) { mobilenav {display:block;} }
@media (min-width: 1199px) { mobilenav {display:none;} }

Media querys example