How can I fix the issue with the fullscreen menu still allowing scrolling even though it is set to a fixed position on my Webflow site?
TL;DR
- Set the fullscreen menu to fixed with full positioning and high z-index.
- Create a
no-scrollclass on the body withoverflow: hidden, and use interactions to add/remove this class when opening or closing the menu.
If your fullscreen menu in Webflow is set to a fixed position but the page still scrolls, the issue is likely with the body scroll not being disabled when the menu is open.
1. Set the Navigation Menu to Fixed
- Select your fullscreen menu wrapper in the Webflow Designer.
- Set Position to Fixed and Full (Top + Bottom + Left + Right = 0px).
- Set Z-index to a high value (e.g., 9999) to ensure it overlays all other elements.
2. Prevent Body Scrolling When Menu is Open
- When the menu opens, Webflow doesn’t automatically prevent body scrolling. You need to do this manually.
- Create an interaction that adds/removes a scroll-disable style.
3. Add a “No Scroll” Class to the Body
- Create a new class called
no-scroll. - Under Body (All Pages) > Add the class and set:
- Overflow: Hidden
- (Optional) Height: 100vh — only if necessary to reinforce the lock.
4. Apply the “No Scroll” Class via Interactions
- Go to Interactions panel and select your "Menu Button" or Navbar trigger.
- For the Open Menu action:
- Add an action that targets Body (All Pages).
- Use the Add Class animation to apply
no-scroll. - For the Close Menu action:
- Add an action that removes the
no-scrollclass from Body (All Pages).
5. Test Carefully on All Viewports
- Double-check that the menu blocks all content scrolling on desktop and mobile.
- On mobile, inspect to ensure the native touch scroll is disabled as expected.
Summary
To stop scrolling when your fullscreen menu opens, use interactions to add a no-scroll class to the body that sets overflow: hidden. This ensures the fixed menu feels truly modal and locks page scroll.