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.