CSS导航未显示为Javascript

我正在使用javascript进行响应式导航（首先在移动设备上工作）。当像素为600px时，我使用媒体查询来隐藏“菜单按钮”，但主导航仍应显示，这是没有发生的。我尝试使用JavaScript来阻止它，但是它不起作用

小提琴

当将屏幕拖动更大时，导航将被完全删除，这应该不会发生

<header>
    <div class="container">
        <a href="#" id="logo">Logo</a>
        <div id="toggleNavMain">Menü</div>
        <nav>
            <ul id="navMain">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div><!--container-->
</header>

使用的Javascript

$(function() {
    var pull        = $('#toggleNavMain');
        menu        = $('#navMain');
        menuHeight  = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle('fast');
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

的CSS

.container {
    max-width: 1070px;
    margin: 0 auto;
}

header {
    background-color: #FFCCCC;
    overflow: hidden;
}

#logo {
    background:url(http://placehold.it/220x80) 0 0 no-repeat;
    height: 80px;
    display: block;
    width: 220px;
    margin-bottom: 50px;
    text-indent:-9999px;
}

#toggleNavMain {
    display:block;
    position: absolute;
    right: 15px;
    top: 40px;
    background: #e3bf91;
    padding: 2% 3%;
    font-size:1.2em;
    cursor:pointer;
}

#navMain {display:none;}

#navMain {
    list-style: none;
    padding: 0;
}

#navMain li {
    text-align:center;
    float:left;
    width:100%; 
    margin-bottom:1%;
    background-color: blue;
}

#navMain li a {
    display: block;
    padding: 2% 0;
}


@media screen and (min-width: 600px) { 

#toggleNavMain {display:none;}

}