Hide a div on desktop
<p>I am attempting to hide a div on a desktop.  I've attempted media queries (Caroline's solution here is an example: <a href="https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885" rel="nofollow noreferrer">https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885</a>)</p>

<p>I have gotten my bigger nav (.menu) to be hidden on mobile, but I can't figure out how to hide my mobilenav on desktop.  If I set display of mobilenav to "hidden" in main CSS and display to "block" in my media query the div stays hidden.  I'm guessing there is a problem with my code somewhere.  Any advice you have would be appreciated.  Here's my fiddle:</p>

<p><a href="https://jsfiddle.net/eamr662L/" rel="nofollow noreferrer">https://jsfiddle.net/eamr662L/</a> (full code for website)</p>

<p>Here's an excerpt of what I think is the relevant code:</p>

<pre><code>    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 &gt; nav &gt; ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;

    }

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

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

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

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

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

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

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

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

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

<p>Here's the site:</p>

<p><a href="http://nybg.beta.libguides.com/" rel="nofollow noreferrer">http://nybg.beta.libguides.com/</a></p>

<p>Thank you!</p>

<hr>