How can I prevent the body from scrolling when the mobile menu overlay is active in Webflow?

TL;DR

Create a no-scroll class with overflow set to hidden.
Use Webflow interactions on the Navbar to add this class to the Body when the menu opens and remove it when it closes.

To prevent body scrolling when the mobile menu overlay is active in Webflow, you need to disable page scrolling while the menu is open.

1. Create a Custom `no-scroll` Class

In your Webflow project, create a new class, e.g., no-scroll.
Set the following style for this class:
Overflow: Hidden
Do not assign this class to any elements yet.

2. Add Interactions to Toggle `no-scroll`

Go to your Navbar element or the element that triggers your mobile menu.
In the Interactions panel, create a new page trigger or element trigger based on the menu open/close event.

Select the Navbar element.
Go to the Interactions panel, and under Element Trigger, choose Navbar.
Set two actions:
When Navbar opens → Add Class no-scroll to Body
When Navbar closes → Remove Class no-scroll from Body

3. Assign the Actions to the Body

In the interaction steps above, choose Body (All Pages) as the target element when adding/removing the class.

4. Double-Check that Overflow is Hidden

Open the menu in preview mode. Body scrolling should be disabled when the menu is open and re-enabled when closed.
You may want to test on both actual mobile devices and browser emulators to confirm UX behavior.

Summary

To stop body scrolling when the mobile menu is open, add a no-scroll class (with overflow: hidden) to the Body using interactions triggered by the Navbar open/close events, then remove it when the menu closes. This ensures a clean mobile user experience.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What are some Webflow-friendly alternatives to Stripe that support crypto payments, customizable checkout carts, acceptance of Swiss Francs, and the implementation of a subscription feature?

Will Webflow incorporate responsive font sizes in its platform?

Is it possible to have a background image in a div, set to "cover" and placed within a div set to "overflow hidden", that reacts to different image proportions and fills either the height or width while cropping to the center, using Webflow?

Why are the menu dropdowns not working in Chrome after updating to Windows 10 on both a PC and Mac using the same version of Chrome?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

Is there a code in Webflow that can automatically redirect an idle page back to the Home page after a certain period of time?

Who can I contact for customer support after purchasing a Webflow template and encountering difficulties with customizing the intro page designed by a third party?

How can I fix the issue where the other divs do not move downward when content is expanded in Webflow?

Can Webflow create a feature similar to Typeform?

How can I fix the issue of the scrollbar line not being displayed on iOS devices for the horizontal scroll gallery on my Webflow site?

Why do all my Webflow site pages have a horizontal overlay, even after trying to hide overflowing content and using elements with 100vh?

How can I make a section scroll horizontally while scrolling vertically in Webflow?

Is there a straightforward way to duplicate a Symbol in the symbols list in Webflow? I need to create a duplicate of a navbar to make changes without affecting the original one or its interactions. Unlinking the Symbol causes issues with interactions on desktop view. The duplicated navbars will be used for different screen versions. Thank you!

How can I avoid negative SEO consequences in Webflow due to duplicate content on paginated collection pages?

How can I make the hero section in Webflow fill the browser viewport perfectly regardless of the height of the browser window?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I close a dropdown in Webflow when clicking on a link?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?