Disable Scroll for Webflow
Learn how to easily disable and enable page scroll in Webflow when your mobile menu is open. Includes a simple JavaScript snippet and insights on Finsweet's solution—perfect for small business websites.
.jpg)
Disabling page scroll when your mobile navigation menu is open is a must for a smooth user experience. While Finsweet’s solution is feature-packed and works well for many Webflow sites—especially small businesses—it can be tricky to set up for something as simple as toggling scroll on your hamburger menu. If you just want a lightweight fix, here’s an easy script you can add in seconds—and best of all, you don’t need to maintain or update this code at all. Just set it up once and forget about it.
How It Works
When users tap the hamburger menu, this script toggles overflow: hidden on the <body> to disable scrolling, then re-enables it when the menu closes.
Where to add the code:
Paste the script before the closing </body> tag in your Webflow project’s custom code settings or directly on the page. This ensures the script runs after the page content has loaded.
<script>
document.addEventListener('DOMContentLoaded', () => {
const navWrap = document.querySelector('.nav_mob_wrap');
navWrap.addEventListener('click', () => {
// Delay to let Webflow toggle its open class
setTimeout(() => {
const isOpen = navWrap.classList.contains('w--open');
document.body.style.overflow = isOpen ? 'hidden' : '';
}, 50);
});
});
</script>
Just update .nav_mob_wrap to match your menu wrapper class. Publish, and you’re done! No ongoing maintenance required.
