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?
- Use Webflow page interactions or custom JavaScript (with MutationObserver or click listener) to toggle
body { overflow: hidden; }when.w-nav-overlayis open. - Apply
max-height: 100vh; overflow: auto;to.w-nav-overlayvia custom CSS to prevent the overlay from increasing page height and re-enabling background scroll.
You're trying to stop background scrolling when a .w-nav-overlay dropdown is open, but standard fixes like overflow: hidden; or position: fixed; aren't working due to the overlay expanding the page height. Here's how to properly handle this in Webflow.
1. Use body Overflow Control via Interactions
- Create a Page Trigger in Webflow (not a class interaction).
- From the Interactions panel, choose Page Trigger > Dropdown Opens.
- On Open:
- Use an Action to Set Body to
overflow: hidden. - On Close:
- Use an Action to Set Body to
overflow: auto(orvisible).
2. Manually Set Overflow Hidden on Dropdown Open with Custom Code
If Interactions don't solve the issue, apply a custom script to control scrolling behavior.
- Go to Page Settings or Site Settings > Custom Code > Footer.
- Paste the following just before the
</body>tag:
"This will track the navbar dropdown and toggle overflow for the body"
```js
<script>
const navDropdown = document.querySelector('.w-nav-overlay');
const body = document.body;
const observer = new MutationObserver(() => {
const isOpen = navDropdown && getComputedStyle(navDropdown).display !== 'none';
body.style.overflow = isOpen ? 'hidden' : 'auto';
});
if (navDropdown) {
observer.observe(navDropdown, { attributes: true, attributeFilter: ['style'] });
}
</script>
```
- Make sure
.w-nav-overlayis on your page before this script runs, or wrap it in aDOMContentLoadedcheck if it loads later.
3. Prevent Overlay from Expanding the Page Height
The overlay likely increases page height due to absolutely or fixed-positioned children.
- Inspect
.w-nav-overlayand its children using Dev Tools. - Set the following styles via custom CSS:
```css
<style>
.w-nav-overlay {
max-height: 100vh;
overflow: auto;
}
</style>
```
- This ensures the overlay can't exceed the viewport height, preventing the page from becoming scrollable as a result.
4. Alternative: Use Body Lock Utility Class
Another option is to add a no-scroll class to the body when the overlay is open:
- Create a combo class
.no-scrollin Webflow: - Set
overflow: hiddenonBodywith.no-scroll. - Then, use custom code:
```js
<script>
const dropdownToggle = document.querySelector('.w-nav-button');
const body = document.body;
dropdownToggle.addEventListener('click', () => {
setTimeout(() => {
const isOpen = document.querySelector('.w-nav-overlay[style*="display: block"]');
if (isOpen) {
body.classList.add('no-scroll');
} else {
body.classList.remove('no-scroll');
}
}, 100); // Delay needed to let Webflow apply styles
});
</script>
```
Summary
To prevent background scroll when a Webflow dropdown menu opens:
- Set overflow: hidden on
bodydynamically using Interactions or JavaScript. - Limit
.w-nav-overlayheight to100vhwithmax-height. - Use MutationObserver or event listeners to detect dropdown state changes and adjust scrollability accordingly.