How can I prevent the body from scrolling when the mobile menu overlay is active in Webflow?
TL;DR
- Add a custom "no-scroll" class to the Body in Webflow.
- Insert custom CSS in Page Settings > Footer Code:
.no-scroll { overflow: hidden; height: 100vh; }. - Use Webflow Interactions on the Mobile Menu Button to toggle the "no-scroll" class on menu open and remove it on menu close.
To prevent the body from scrolling when the mobile menu overlay is active in Webflow, follow these steps:
1. Add a Custom Class to the Body
- Select the Body element in Webflow.
- Add a custom class like "no-scroll" (this will be referenced in the next steps).
2. Apply Custom CSS in Webflow
- Open the Page Settings under the “Pages” panel.
- Scroll to the Custom Code section.
- In the Footer Code area, add this CSS inside
<style>...</style>tags:<style>.no-scroll { overflow: hidden; height: 100vh; }</style> - This ensures the body height stays fixed and scrollbar is removed when this class is applied.
3. Use Webflow Interactions to Toggle Scrolling
- Select the Mobile Menu Button (the element that opens and closes the menu).
- Go to the Interactions Panel and create a Page Trigger > Mouse Click (Tap) animation.
- For the first click (menu open):
- Action: Choose "Add Class."
- Target: Select the Body.
- Class to Add:
no-scroll. - For the second click (menu close):
- Action: Choose "Remove Class."
- Target: Select the Body.
- Class to Remove:
no-scroll.
Summary
By adding a .no-scroll class to the Body and toggling it using Webflow Interactions when the mobile menu is active, you can prevent background scrolling while the overlay is open.