Change CSS rule for small screen with jQuery I am making bacon menu for small screens. I need to initialize menu without showing menu links, so I hide them with jQuery. The problem is that on big screen menu links are still hidden and I don't want that to happen. 




I use this code to avoid menu link removal on big screens, but it's not working:

scripts.js
    (function (Drupal, $, window) {

  // To understand behaviors, see https://www.drupal.org/node/2269515
  Drupal.behaviors.offer42 = {
    attach: function (context, settings) {

      // Execute code once the DOM is ready. $(document).ready() not required within Drupal.behaviors. 
      // Burger menu for small screen
      $(window).resize(function(){     
        if ($(window).width() &gt; 720 ){
          $('ul.menu').css('display', 'none');
        }
      });

      $('#menuButton').click(function(){
        $(this).toggleClass('is-active');
        if ($(this).hasClass('is-active')) {
          $('ul.menu').css('display', 'block');
        }
        else {
          $('ul.menu').css('display', 'none');
        }
        });

} (Drupal, jQuery, this));


SASS:

.menu
  li
   display: block;
   text-align: center;
   background-color: #fff;
   @include media($medium-screen-up) 
     list-style-type: none
     display: inline-block
     float: right;
     margin: 0 10px 0 10px
     @include position(relative, -50px null null null)
     background-color: initial;
Resolved. 

if ($(this).hasClass('is-active')) {


doesn't allow to show menu links when no class is attached:

else {
          $('ul.menu').css('display', 'none');
        }


So, I modified checking for small screen:

 $(window).resize(function(){     
        if ($(window).width() &gt; 720 ){
          $('ul.menu').css('display', 'none');
        } else {
          $(this).toggleClass('is-active');
        }
      });