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 wrapper to fixed position, full size, and high z-index to fully cover content.
- Add
overflow: hiddento the body via Webflow interactions or a "no-scroll" class when the menu opens, and revert on close to prevent page scrolling. - Ensure the menu and its children don’t have scrollable overflow settings that could leak scroll behavior.
If your fullscreen menu allows scrolling despite being fixed, it's likely due to the body element not being locked during menu open. This is a common issue and can be solved with the right Webflow interactions and structure.
1. Ensure the Menu Overlay Covers All Content
- Make sure your menu wrapper (fullscreen menu element) has Position: Fixed, Top: 0, Left: 0, Width: 100%, and Height: 100%.
- Set a Z-index higher than other elements (e.g., 9999).
- Double-check that it's not sized incorrectly or partially off-screen.
2. Disable Body Scrolling When Menu Opens
- Webflow doesn't automatically prevent body scroll when opening fixed elements.
- Use a Page trigger or Navbar interaction to add CSS overflow: hidden to the body when menu opens.
To do this in Webflow:
- Select your Open Menu interaction.
- Add a new Element trigger > Page > While page is scrolling (optional) or use the Navbar > Open Menu trigger.
- Add a “Custom Action” to affect the Body (All Pages).
- Choose Affect: Body (All Pages) and set Overflow to Hidden.
- In the Close Menu interaction, add a reverse step that sets body Overflow back to Auto.
3. Avoid Nested Scrollable Elements
- If you have scrollable sections or
overflow: autoinside the menu, they may allow scrolling to propagate to the body. - Set Overflow: Hidden on the menu wrapper itself.
- Review child elements and remove any
overflow: scrollorautothat isn’t necessary.
4. Use a “No Scroll” Class as an Alternative
- Create a new style class, e.g., “no-scroll”, with
overflow: hiddenand assign it to the body when menu opens. - Use Webflow interactions to Add Class “no-scroll” to Body on open and Remove Class on close.
Summary
To stop scrolling behind your fullscreen menu in Webflow, set overflow: hidden on the body when the menu is open, either directly through interactions or by toggling a custom class like “no-scroll.” Ensure your menu properly covers the viewport and doesn’t have nested scrollable areas.
