jQuery addClass() not working at certain media queries

Question

If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:

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

What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.

But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.

The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/

This looks to be what I'm trying to override:

Y.use(function (a) {
  a.on("domready", function () {
    if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
        a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
        (a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
    });
  })
});

Answer 1

Instead of add/remove class on click try below approach to add/remove class on body tag.

function addBodyClass(){
    if($(window).width() <= 640){
        $('body').addClass('mobile-nav-open');
    } else {
        $('body').removeClass('mobile-nav-open');
    }
}

$(window).on('load resize', function(){addBodyClass()})

Fiddle Demo