JQuery toggled div not showing on resize

Question

I have a div which I am using it as a container for my website menu items. When the width is below 992px using media queries I am hiding it. In the same time I am showing a menu-toggle which consist the followings:

<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle">
    <i class="fa fa-bars"></i>
</a>

Regarding my JQuery part I am just toggle the menu div every time the menu-toggle is clicked:

$('#menu-toggle').click(function(){
    $('#menu').toggle('slow');
})

The issue that I am encountering is that after I toggle the element for the first time and hide it, jQuery overwrites my media query statement of display:none; with her own. This results in having the menu div hidden when I resize back to a resolution over 992px. Here is my CSS code:

#menu-toggle {
    margin-right: 15px;
    margin-top: 128px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: none;
}
#menu {
    display: block;
    border-bottom: 1px solid #F23A3A;
    margin-bottom: 15px;
    background-color: #FAFAFA;
}
@media (max-width: 991px) {
    #menu-toggle {
        display: inline-block;
    }
    #menu {
        display: none;
    }
}

It is a very annoying bug which I didn't figure it out how to solve it in a proper manner so any guidance is more than welcomed.

score 1 · Accepted Answer · answered Mar 05 '15 at 18:59

Something like this jsFiddle
note: I changed your max-width: 991px to 491px because it's hard to test it in jsFiddle with a high amount, feel free to change it back.

I force the menu to have display:block; when the screen is bigger than 492px. This is the only way ^{(correct me if I'm wrong)} to overwrite inline css.

new css:

#menu-toggle {
    margin-right: 15px;
    margin-top: 128px;
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 1;
    display: block;
}
#menu {
    display: block;
    border-bottom: 1px solid #F23A3A;
    margin-bottom: 15px;
    background-color: #FAFAFA;
    height:50px;width:50px;
}
@media (min-width: 492px) {
#menu{display:block !important;}
}
@media (max-width: 491px) {
    #menu-toggle {
        display: inline-block;
    }
    #menu {
        display: none;
    }
}

score 1 · Answer 2 · answered Mar 05 '15 at 19:00

Instead of using the JQuery .toggle feature, you can manually enable and disable a 'toggle' CSS class on an element. This means your media queries (and original CSS) are always respected.

CSS: Notice how the id #menu-toggle has been replaced with #menu.toggle, which should select elements with id menu and class toggle.

#menu.toggle {
    margin-right: 15px;
    margin-top: 128px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: none;
}
#menu {
    display: block;
    border-bottom: 1px solid #F23A3A;
    margin-bottom: 15px;
    background-color: #FAFAFA;
}
@media (max-width: 991px) {
    #menu.toggle {
        display: inline-block;
    }
    #menu {
        display: none;
    }
}

JS:

$('#menu-toggle').click(function(){
    $('#menu').classList.toggle('toggle');
})

You can read more about classList and .toggle here. The element can also be animated using CSS transitions or animations - see here.

JQuery toggled div not showing on resize

2 Answers2