CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
vplusm
vplusm

Reputation: 59

Css navigation not displaying with Javascript

I'm using javascript for my responsive navigation (working mobile first). When at 600px I use a media query to hide the 'Menu button', but the main Navigation should be still displayed, which it is not happening. I tried using a javascript to prevent it but it does not to work

fiddle

When dragging the screen bigger, the navigation is completly removed, which should not be happening

<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 used

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

}

Upvotes: 1

Views: 66

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241198

You could just use an additional media query to hide the menu ul if the screen size is less than 600px

EXAMPLE HERE

@media screen and (max-width: 600px) {
    #navMain {
        display:none;
    }
}

Upvotes: 3

CRABOLO
CRABOLO

Reputation: 8793

http://jsfiddle.net/XxPgG/1/

I think this is what you want.

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

Upvotes: 1

Related Questions