Negin Basiri Negin Basiri - 1 year ago 100
jQuery Question

How to get media queries to work with style added by a toggle function

I have a mobile-menu which is toggled by js code when user clicks the mobile-menu-icon.

The problem I have is: when re-sizing screen from mobile view to large view, the menu is still open.

I used media query to hide the mobile-menu for large screens, but it seems the toggle method added

on the element and the media query cannot override that.

What's your approach to fix this problem?

Answer Source

Instead of using .toggle, use .toggleClass("hidden"). Then you can use CSS

.hidden {
    display: none;

When the class is removed, it will get whatever styling is default for the media type.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download