javascript - 特定のウィンドウ サイズで Javascript が機能しない

Question

免責事項: 私は JS の初心者です。Squarespace テンプレートの上でこのコードを使用しようとしています。かなり単純明快なはずですが、既存のコードと競合していると思います。

$(document).ready(function() {
    $('#mobileMenu').click(function(){      
      if ($('body').hasClass('mobile-nav-open')) {
          $('body').removeClass('mobile-nav-open')
        } else {
          $('body').addClass('mobile-nav-open');
        };
    });
  });

をクリックすると、モバイル ナビゲーション メニューが開くはずです#mobileMenu。これは、ブラウザのサイズが 1100px 未満の場合にのみ表示されます。640px から 1100px の間で動作します。640px 未満のものは何もしないようです。奇妙なことに、サイズを 640px 以下に縮小すると機能します。しかし、640px 以下でページを読み込むと機能しません。

私のJSの知識はかなり軽いです。おそらく元のJSをオーバーライドすることでそれができるでしょうが、その方法がわかりません。どんな助けでも大歓迎です、ありがとう！

https://ryan-vandyke-4rks.squarespace.comでサイトを表示できます。