I'm using jQuery slideToggle function and the media queries.

The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.

If I do not click on the toggle link, and resize the window back to large size, it works fine.

Demo to see the problem:

Please check the demo here, where you can see the problem: /

Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.

Here's my code:

HTML:

<div class="bar">
    <a class="toggle" href="#">MAIN MENU</a>
</div>

<div class="nav">
    <div class="wrap">
        <ul>
            <li>Link 1</li>
             <li>Link 2</li>
        </ul>
    </div>
</div>

CSS:

.bar{
    display: none;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
     .nav ul { 
        display: none;
    }

    .bar{
        display: block;        
    }
}

jQuery:

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});

I'm using jQuery slideToggle function and the media queries.

The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.

If I do not click on the toggle link, and resize the window back to large size, it works fine.

Demo to see the problem:

Please check the demo here, where you can see the problem: http://jsfiddle/3Jj7J/

Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.

Here's my code:

HTML:

<div class="bar">
    <a class="toggle" href="#">MAIN MENU</a>
</div>

<div class="nav">
    <div class="wrap">
        <ul>
            <li>Link 1</li>
             <li>Link 2</li>
        </ul>
    </div>
</div>

CSS:

.bar{
    display: none;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
     .nav ul { 
        display: none;
    }

    .bar{
        display: block;        
    }
}

jQuery:

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});

• javascript
• jquery
• html
• css
• media-queries

• The problem obviously is, is that the inline style added by jQuery is overwriting your CSS rules. You could listen to the resize-event and force a new toggle if the element is hidden and the screen's width is over 500px. – insertusernamehere Commented Sep 24, 2013 at 9:00
• Could you please give an example? – user2738640 Commented Sep 24, 2013 at 9:01

2 Answers 2

add on window resize event handler :

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});  

jQuery(window).on('resize', function(){   
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
         menu.show();   
    }
});  

jsFiddle : http://jsfiddle/3Jj7J/1/

update: this is alternative solution (just remove inline display property, so it will use css rule).

jQuery(window).on('resize', function(){     
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
        menu.css({'display':''});   
    }
});  

DEMO

I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:

CSS:

        #bar {
        display: none;
        color: #000000;
        border: 1px solid red;
    }

    @media screen and (max-width: 500px) {
         #nav ul { 
            display: none;
        }

        .bar{
            display: block;        


   }
}

To see for yourself (http://jsfiddle/hSZ7t/) What I've done is changed your CSS. Instead of you using:

.bar {

It's now:

#bar {