Hi, I would like to make it so that when my menu is open, the user cannot scroll. Do you know how I can set this up, please?
Thanks for your time,
Finsweet has a script for this. It’s very easy to implement in Webflow: Disable Scrolling - Disable Page Scrolling for Webflow
1 Like
Add a body { overflow: hidden; } when the menu is open, then remove it on close. Easiest way in Webflow is using an interaction to toggle a no-scroll class on the body. Had to do this on a client’s fullscreen nav recently and it worked smoothly.
1 Like
Thank you! It works nicely, but when the menu is closed with cross icon I have to click somewhere else on the website to unlock scrolling again…
Try to remove the interaction you put on the nav-close button and test it again:
If this doesnt work, then instead of using the option “smart nav” try using “Enable & Disable Scroll“ instead.
Thanks! It works smoothly now. I set it up with enable/disable on the body and the close (cross) icon.
Perfect.
One more thing: I now see why it didn’t work with smart-nav.
Your nav-close button (cross) doesn’t actually close the navigation. It just moves it to the left. This is why you have to click somewhere before you can open the nav again.
I think to fix this you just have to remove the interaction on the closing element (as I mentioned above) and convert the element to a “link block“. This should fix it and when you click on the element it actually closes the navigation instead of just moving it.
1 Like