How can one prevent scrolling when the off-canvas menu is open? I want the focus to be on the content of the nav menu when it’s open, so I want to limit/lock the visitor’s ability to scroll and distract themselves.
The off-canvas nav menu (hamburger button) right here is a perfect example.
Is this something that can be done in Webflow?
@sabanna any ideas? I feel like you are the master of stuff like this.
Try to use this script (been used for preventing scroll with custom modals), .menu-button-class and .menu-class-name should bechanged on classnames that you have:
<script>
Webflow.push(function() {
$('.menu-button-class').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
$('.menu-class-name').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
</script>
Thanks @sabanna and @DFink. I added it to the customer footer code section. Will see how it looks once I publish the site. 
Hi @sabanna, I tried using the script you mentioned but it’s not working for me as I only have one button to perform the whole thing (actually, it’s a link block that opens and closes a side menu). Do you know if it’s possible to do something like on first click prevent scrolling, on second click allow scrolling?!
I tried giving the same class to .menu-button-class and .menu-class-name and nothing happens. I also tried using your script having two buttons (I already deleted the close button), with different class names and I couldn’t get this to work (which is odd because I have managed to make this work in the past with modals…)
Do you mind taking a look, please?
https://preview.webflow.com/preview/pnc-test?preview=df514a3d9bfeb25d60bfd3e01e49c264
Thanks 
Hi @sabanna. I used your code and replaced the .menu-button-class and .menu-class-name and when I opened the nav, scrolling was prevented. So it worked!
The problem is, after I close the navigation, I can’t scroll at all on my site. The entire page is fixed. Any ideas to make the page scrollable again?
Works fine to me 
Did you manage to fix it?
Hello, @Filipa
My apology for the delay with the answer.
Could you provide the link to published site? Because I am not able to see the custom code that you are using, so it is hard to find the reason of the problem.
Regards,
Anna
Nope. I tried moving the code from the footer to the header, but that made it not work. So I moved it back to the footer. I’m still having the issue where, after I close the nav menu, the site is stalled. I am using this MagicMenu code in my custom code as well…maybe that’s having some effect?
Just to clarify, for the menu-class-name, that refers to the Nav Menu and not the Navbar or Nav Container, right? I’m using the Nav Menu class name.
HI @sabanna i might as well jump in here
Does the code basically read when .menu-button is clicked it prevents scrolling on .slide_menu ?
with my limited understanding of that is how I am reading it. But it is not working for me either.
here is my preview link https://preview.webflow.com/preview/tweetshoppeandvintagerentals?preview=f5afb0f1836410a7286f5f0d71856830 it is on the tweetshoppe main page
I do have a separate close button so maybe that will not work. But this would be a nice feature to implement because the scrolling under the menu is distracting.
thanks
Jeremy
Hi, @jbleroux
No, it works like this: When menu button (or any other object which class you will add) is clicked, js code change the CSS of the body and make it overflow: hidden >>> that makes the body unscrollable.
Then next part of the code takes click from another object (close button, menu, modal background, etc.) and change the CSS of the body again, making it overflow: auto >>> that makes the body scrolling again.
Hope it helps.
Cheers,
Anna
Ok that makes much more sense thank you. Is it best to place it in the custom code for the whole site? or the individual pages?
hmmm still not working maybe you could take a quick look at my read only link and see what I migth be missing
If you have the same classes for both “click events” on each page (like a menu, for example) then it makes sense to add this in site settings custom code.
If this code has to be used with a modal popup on some page, then add to page custom code.
Could you give a published site link?
Ok, I already checked Everything works
You guys probably forgot, that custom jQuery or javaScript code will work ONLY ON PUBLISHED SITE
Hey, @ckboddic
I just realize that link in your original (first) post in this topic is not your site. Could you share the read-only link and link to published site, please?
Cheers,
Anna
http://tweetshoppeandvintagerentals.webflow.io/tweet-shoppe/main
Is it working for you? I checked the published site. Maybe it’s my browser.
Checked on Chrome, Firefox and Safari. Everything works for me.
You are a rockstar thank you Anna. You have helped me figure out a lot of stuff on here over the last 6 months.
thanks
Jeremy
Always welcome We are here for helping each other. And learning is good!
Regards,
Anna
