How can I prevent the background from scrolling when it is overlayed with a drop-down menu in Webflow? The suggested solution of using webflow.push as a function did not work and overflow-hidden and position-fixed also did not take any action. The page is completely covered with .w-nav-overlay, which causes the overlay to draw the height larger than the page, making it impossible to stop the scrolling. Can someone please help me with this issue?

TL;DR

Apply a .no-scroll class with overflow: hidden, height: 100vh, and position: fixed to both html and body when the menu opens.
Use custom JavaScript in Webflow's page settings to toggle the .no-scroll class based on dropdown open state.
Ensure .w-nav-overlay doesn’t interfere by limiting its height with max-height: 100vh and adding overflow-y: auto if needed.

You're trying to prevent background scrolling when a dropdown menu (overlay) appears in Webflow, but standard methods like overflow: hidden or position: fixed aren't working due to .w-nav-overlay extending the full height of the page.

1. Understand Why `overflow: hidden` Fails by Default

When a large overlay like .w-nav-overlay is appended at the body end, applying overflow: hidden to the body doesn’t stop scrolling because the html tag can still scroll.
Also, dynamically injected elements by Webflow (like the Dropdown or Navbar overlays) may interfere with your layout since they're positioned absolutely or fixed and appear at the bottom of the DOM.

2. Apply `overflow: hidden` to the `html` and `body`

Apply overflow: hidden to both html and body elements when the dropdown/overlay is open.
Add a custom class like .no-scroll to both html and body when the menu opens, and remove it when closed.
This can be achieved with custom code that listens to the opening and closing of the dropdown or menu.

3. Add Custom Code to Toggle Scroll Lock

Go to Page Settings > Before tag and insert:
```javascript
```
Replace .w-dropdown-toggle with your actual dropdown trigger class if different.

4. Add the `.no-scroll` CSS Rule

In your Webflow project, go to Project Settings > Custom Code > Head or use an embedded <style> element in the page.
```html
```

5. Ensure Overlay Is Not Blocking the Scroll Lock

Check that .w-nav-overlay is not detached from the scrolling context. If it’s appended to <body> independently, ensure it doesn’t independently expand past the viewport:
Use max-height: 100vh and overflow-y: auto on .w-nav-overlay if needed.
Adjust the overlay's z-index and position to avoid interfering with scroll lock.

Summary

To stop background scrolling behind an open dropdown or mobile menu, apply a custom .no-scroll class to both the html and body elements using Webflow's Webflow.push() inside a <script>. Also, define CSS to lock scroll properly. This prevents body scrolling even when overlays stretch the page height.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer