How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
TL;DR
- Create a
no-scrollclass in Webflow withoverflow: hiddenand use JavaScript to add it to the<body>when the nav menu opens and remove it when it closes. - Ensure unique class selectors for the menu button and menu container to reliably detect the menu's open state.
You're trying to disable scrolling when the navigation menu is open and re-enable it when closed, but class toggling issues are preventing it from working consistently.
1. Understand the Scroll Lock Mechanism
- Most scroll lock techniques apply custom styles (often
overflow: hidden) to the<body>element. - Scroll disables when a specific class is added to the body, usually triggered by opening the nav menu.
2. Define a Scroll Lock Class in Webflow
- Go to your Webflow project.
- Create a class (e.g.,
no-scroll) and apply these styles: - Overflow: Hidden (on All Devices).
- No other properties are necessary.
3. Use Custom Code to Toggle Body Class
Place the following custom JavaScript in your project:
Project Settings > Custom Code > Footer — or in a Page Settings > Before