Created a nav specifically for mobile view but it still shows in desktop view

Question

I made a nav for mobile view only and noticed that it still stays in desktop view despite it only being with the mobile media queries css. The nav is a div right by the menu div which both are in the main nav of the website in the html.How can i make sure the nav and it's content only stay in mobile view and not include desktop view?

jsfiddle - http://jsfiddle.net/LpbL6vj2/

<aside class="sidebar">
    <nav>
        <div class="menu"></div>
        <div class="mobile-header"><a href="index.html">Taffies Cupcakes</a></div>
        <ul class="main_nav">
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav> <!-- end of nav -->

        <div class="company_info">
            <p>Taffies cupcakes</p>
            <p>111 x drive road</p>
            <p>milton keynes</p>
            <p>l0002</p><br>
            <p>telephone: 078 878-8888</p>
        </div> <!-- end of compnay info text -->

</aside> <!-- end of aside -->



@media screen and (max-width:640px){

    .container{
        width:100%;
    }

    .sidebar{
        width:100%;
        margin:0;

    }

    .main_nav{
        display:none;

    }

    .company_info{
        display:none;
    }

    .first_article{
        width:90%;
        margin-top:50px;
    }

    footer p{
        display:none;
    }

    .about_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .orders_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .contact_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .gallery_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .menu:before{
        content:"Menu";
    }

    .menu{
        font-family:myriad pro;
        font-size:20px;
        color:#3d2316;
        display:inline-block;
        padding-left:8px;
        padding-right:0px;
        padding-top:10px;
        padding-bottom:8px;
        background-color: #CBAFA2;
        cursor:pointer;
        width:30%;
        text-align:center;
        float:left;
    }

    header{
        display:none;
    }

    .mobile-header{
        width:62%;
        padding:10px;
        font-family:georgia;
        font-weight:bold;
        font-size:20px;
        background-color:#3d2316;
        float:left;
    }


}

Answer 1

You need to add a non-media-query rule to hide the nav. Something like:

.sidebar nav {
    display: none;
}

@media (max-width: 640px) {
    .sidebar nav {
        display: block;
    }
}

So while the window is narrow, the media query rules apply. When the window is wide, the normal rules apply.