Css navigation not displaying with Javascript

Question

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

}

Josh Crozier · Accepted Answer · 2014-01-26 02:13:44Z

3

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

answered Jan 26, 2014 at 2:13

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vplusm Over a year ago

wouldn't that be considered bad practice - using two different types of media queries ('max' and 'min')? I'm fairly new to webdesign so excuse me if this question is kinda stupid.

Josh Crozier Over a year ago

@user2488493 I don't see how it would be considered a bad practice, they are being used properly. There are 2 media queries, neither of which will overlay, therefore one will always be satisfied. It's extremely common to have multiple media queries. If anything, it would be best to use an additional media query as opposed to adding more jQuery.

CRABOLO · Accepted Answer · 2014-01-26 02:13:30Z

1

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

answered Jan 26, 2014 at 2:13

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

Collectives™ on Stack Overflow

Css navigation not displaying with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related