Negin Basiri Negin Basiri - 6 months ago 12
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

display:block
on the element and the media query cannot override that.

What's your approach to fix this problem?

Answer

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.