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 append a css class to an element by javascript?

    How to link a header in a standards-compliant way?

    How show button hovering above an image or pressing over it? [closed]

    how to put css in selected row in angular js?

    how to remove a TR which have a TD that contain specific text

    How to cancel specific one element at external CSS?

    how can i change the style of scroll bar

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    how do i allign my div containers using css

    How can I use bootstrap in css file?

    How to disable scrollbars in Webmethods 8?

    How to use CSS on autocomplete textbox selected values

    using percentages for css text - how do i stop inheritance of font-size from parent

    CSS How to embed several Font-Weights at once

    How to create table by using div

    How to zoom into a specific location of an image using CSS

    nth-of-type css, how to setup it properly

    CSS: Is there a limit on how many classes an HTML element can have?

    How to adjust the opacity of CSS background image instead of radio button with an icon overlay

    How to Skew divs with css

    How to fix error css width x height when run as mobile

    How to make image previews (thumbnails) using html/css

    How to calculate sine, cosine in Less?

    How do I adjust triangle in css price tag to the right size

    How to avoid text go below the thumbnail with css

    how can i force all rows in a table to have the same height

    How change css of disabled input checkbox tag?..because it's too light and hard to see

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to make a CSS button work correctly?

    how do i edit my CSS to show following things please [closed]