There is a normal menu, the button (hamburger) of which appears, at a resolution of less than 768рх . When you click the menu pops up itself, but if you increase the resolution, this menu does not disappear. Of course, you can make it through the media query display:none , but then when the resolution is less than 768рх menu appears in expanded form and is not hidden by the button.

 $(document).ready(function () { //Menu button on click event $('.mobile-nav-button').on('click', function() { // Toggles a class on the menu button to transform the burger menu into a cross $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ) .toggleClass( "mobile-nav-button__line--1"); $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)" ) .toggleClass( "mobile-nav-button__line--2"); $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)" ) .toggleClass( "mobile-nav-button__line--3"); // Toggles a class that slides the menu into view on the screen $('.mobile-menu').toggleClass('mobile-menu--open'); return false; // if(($(window).width()) > 767){ // $('.mobile-menu').removeClass('mobile-menu--open'); // }; });
  • One way or another, you need to solve this through @media . If you break something when using it, this is a sign that you need to bring the rest of the layout to the mind using the same @media , but not to consider this way to be wrong. - Stanislav Belichenko
  • What's the problem? What does not work? What do you want to do with this code? What question do you put before us? If you ask about the event that is triggered when resizing, then this is .resize . In your code, it will look like this: $(window).resize(function(){if($(window).width() > 767) $('.mobile-menu').removeClass('mobile-menu--open')}) - Diskyp

1 answer 1

You almost did it yourself!

Use .resize() to subscribe to an event that occurs when the window is resized:

 $(window).resize(function () { if($(window).width() >= 768){ $('.mobile-menu').removeClass('mobile-menu--open'); }; }

It says that if, when the window is resized, its size becomes >= 768 , then the class .mobile-menu--open will be deleted.