How to make the class hiding work when if ($(window).width() > 960)?

Question

JavaScript

There is JS

$(window).resize(function(){
// Hide mobile menu etc on window resize
 	if ($(window).width() > 960) {
       $('.mobile_menu_wrapper').hide();
 	}

});

With a resolution > 960 it should hide the mobile_menu_wrappe class, but I can't understand if I go to the site with a resolution > 960, it does not hide this class, but when I reduce the browser window to a resolution lower than 960 and then stretch it again, the script works.
How can you correct?

Answer 1

do the same check on page load

Answer 2

Is n't it easier to use css media query ?

Answer 3

Like this for example:

$(function () {
    $(window).resize(function(){
        console.log($(window).width());
        if ($(window).width() > 960) {
           $('.mobile_menu_wrapper').hide();
        } else {
            $('.mobile_menu_wrapper').show();
        }
  });
});