JQuery toggled div not showing on resize


Tags: javascript,jquery,html,css

Problem :

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.



Solution :

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

    CSS Howto..

    How to stretch line between two cells ( tags)

    How to align dropdown sub menu?

    How to create a layout with 2 menu bars in css?

    How can I divide the screen to these divs in css?

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    How to show reply and retweet icons using hover effect with css?

    How set css style to GWT TextBox text?

    How to code a drop down menu in css?

    how to make css sub menu links longer than parent link

    How to make text input line up with button in IE7?

    how can I apply css based on parent div class

    CSS to keep middle image in 100% width slideshow always in center

    How to get Mouse Out effect in CSS

    How to make value text in form be italic

    How to add numbered list style in div tag

    How to fix image urls when processing css files with Gulp?

    How can I get this anchor link to look like a button

    How to specify styles for h:panelgrid in jsf

    How to make CSS width to fill parent?

    CSS how to height step arrow

    How to make all cross browser compatible skewed div edges?

    How to make arc shapes with CSS3?

    jQuery / CSS: How to add page breaks dynamically

    How to Change Style of Parent
  • on Hover
  • How does jQuery .fadeTo() work?

    How to use CSS with javascript

    how are large quantities of css templates produced?

    How to segregate these divs with 'position:absolute' into different groups?

    How to give Internet Explorer different CSS lines?

    Want to override Bootstrap, but how to avoid the use of !important?