How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

TL;DR

Create a no-scroll class on the body with overflow: hidden to block scrolling.
Use JavaScript (preferably with a MutationObserver) to toggle the no-scroll class based on whether the navigation menu is open or closed.

You're trying to disable page scroll when your navigation menu is open, but your current method may not handle opening and closing states properly due to class targeting issues. Here's how to correctly set up scroll control behavior in Webflow using custom code.

1. Add a `no-scroll` Class to the `body`

In Webflow, create a new combo class on the body called no-scroll.
Set its overflow property to hidden in the Styles panel. This will prevent scrolling when applied.

2. Use Custom Code to Toggle Scroll Lock

Go to Page Settings or into the Closing tag embed in a code block, and paste the following script:

<script>  const menuButton = document.querySelector('.your-menu-button-class'); // Update with your actual class  const navMenu = document.querySelector('.your-menu-class'); // Update with your actual class  menuButton.addEventListener('click', function () {    // Check if the navMenu is open by checking for 'is--open' class (Webflow default), or use your own    const isOpen = navMenu.classList.contains('w--open'); // or 'open' or whatever class Webflow adds on open    if (!isOpen) {      document.body.classList.add('no-scroll');    } else {      document.body.classList.remove('no-scroll');    }  });</script>

Update class selectors (.your-menu-button-class and .your-menu-class) to match the actual class names used in your Navigation element and toggle button.
Webflow normally adds classes like w--open to open dropdowns and nav menus. You may inspect the live preview to confirm exact behavior or use your own custom toggle class.

If you're using Webflow’s built-in Navbar, the menu toggle happens after the click, so your script may fire before the class changes.
To fix this, use setTimeout or observe the DOM using a MutationObserver. Here's a better version using MutationObserver:

<script>  const navMenu = document.querySelector('.your-menu-class');  const observer = new MutationObserver(mutations => {    mutations.forEach(mutation => {      if (mutation.attributeName === 'class') {        const isOpen = navMenu.classList.contains('w--open');        if (isOpen) {          document.body.classList.add('no-scroll');        } else {          document.body.classList.remove('no-scroll');        }      }    });  });  observer.observe(navMenu, { attributes: true });</script>

Summary

To prevent scrolling when your navigation menu is open in Webflow:

Create a no-scroll class with overflow hidden.
Use JavaScript to toggle that class on <body> when the menu opens/closes.
If using the Webflow Navbar widget, a MutationObserver ensures your script reacts to actual menu state.

This method works regardless of class name duplication and handles scroll lock reliably.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer