Disable Body Scroll When Navbar Is Open
Toggles a scroll-disabled class on <body> whenever the Webflow nav button is clicked. Also listens for window resize so scroll is restored automatically when the viewport hits desktop width.
Add this CSS alongside the snippet:
body.scroll-disabled {
overflow: hidden;
}
JAVASCRIPT
var menuBtn = document.querySelector('.w-nav-button');
if (menuBtn) {
menuBtn.addEventListener('click', function() {
document.body.classList.toggle('scroll-disabled');
});
// Also re-enable scroll if menu closes via resize
window.addEventListener('resize', function() {
if (window.innerWidth > 991) {
document.body.classList.remove('scroll-disabled');
}
});
}