Preventing scroll on navbar open mobile

Hey guys,

After much reading a lot & playing around trying to get the body to lock when the default navabr is open on mobile I thought I’d post my solution. I wanted to keep the Javascript to a minimum, so there are some CSS tweaks here too.

Hope it helps!


In Custom Code in project Settings add:

Webflow.push(function() {
   $('.w-nav-button').on('click', function(e) {
      $('html').toggleClass('disable');
      e.preventDefault();
   });
});

I’ve used webflow.push because it fires before the normal $(document).ready(function()

When the button is clicked it toggles .disable on the html tag

The CSS (which can also go in Custom Code) is:

html.disable {overflow: hidden;}
html.disable body {
   height: 100vh;
   overflow: hidden;
   position: fixed;
   max-height: 100%;  
}

The last step to make sure it works on iOS is to add cursor: pointer to the mobile nav button, this makes the click above work.

image