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 create CSS internal style sheet in CakePHP

    How do I organise divs that are nested inside each other?

    How do I align my radio button with associated text?

    How to make my delete buttons responsive and stay absolute on my thumbnails

    how to read content in a webpage that doesn't appear in page source

    How to use icon images?

    how to bind newly created html element to its css

    How to Fix: iOS drops CSS files when javascript changes DOM

    How to solve buggy line-height on input fields?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How can I set the body color of a web page to the current width and height of the monitor?

    How to center div using JQuery or CSS

    How to autoprefix css files generated by less, in Webstorm?

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS

    How to make string comparison exactly

    How to define CSS rules relative to previously defined values witout re-writing them?

    How to add css on elements created through ajax (jquery)?

    How to dynamically set and modify CSS in JavaScript?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to add new fonts in CSS for local testing

    How to stop CSS within a RichText field from overwriting document

    Site Network Bar - Show Current Site Stats, CSS?

    How to get variable`s value of CSS from database in yii?

    How to display an image in the right upper corner of an input box

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How could i make CSS apply to all in a div?

    How to resize the width of a div based on another div on it's right, only with CSS(no JS)

    How to detect if content have more then one line in Angular?

    How to load a apply jQuery function upon appending a
    via Ajax?

    Showing the percentage of poll's progress bar outside progress bar