Webflow sync, pageviews & more.
NEW

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
  • Use Webflow interactions to add a no-scroll class to the Body when the fullscreen menu opens and remove it when it closes.
  • Define .no-scroll { overflow: hidden; } in custom code to prevent background scrolling while the menu is active.

Your fullscreen menu is fixed in position, but the page still scrolls underneath it. This usually happens because body scrolling isn't disabled when the menu opens.

1. Disable Body Scroll When Menu is Open

  • Go to the Navigator panel and select the Body element or any parent wrapper that scrolls.
  • Create a new combo class like body.no-scroll or use a custom attribute for styling control.
  • In your Webflow Interactions panel, update your fullscreen menu “Open” animation:
  • Add a step to apply the no-scroll class to the Body (using the Add class action).
  • In the “Close” animation, remove the no-scroll class (using the Remove class action).
  • In your Webflow custom code settings, add a no-scroll class style:
  • Go to Page Settings → Custom Code → Inside Head and add:
    • <style>body.no-scroll { overflow: hidden; }</style>

2. Check z-index and Container Sizes

  • Make sure your fullscreen menu has a high enough z-index (e.g., 9999) so it fully overlays other elements.
  • Confirm its dimensions:
  • Set Width: 100% and Height: 100vh.
  • Position: Fixed, Top: 0, Left: 0.

3. Test on All Devices

  • Use Webflow’s device preview tool to ensure the no-scroll is working across tablet and mobile views, where the default body behavior can differ.
  • If necessary, apply the no-scroll class dynamically with custom JavaScript for more complex menus (optional).

Summary

To prevent scrolling behind a fullscreen fixed menu in Webflow, apply a no-scroll class to the Body element using interactions, and define that class in custom code as overflow: hidden. This locks the background while the menu is open.

Rate this answer

Other Webflow Questions