How to Disable Scroll When Opening a Menu or Modal in Webflow
Hello everyone!
In this post, I’ll show you how to disable scrolling when opening a navigation menu or modal in Webflow.
This tutorial is also available in video format ⏬
Code to Disable Scrolling
Make sure to replace .class-name with the class name of your menu button.
Then, create a CSS class named overflow__hidden and apply overflow: hidden; to it.
When the menu closes, the class will be removed automatically.
How the Code Works
When the element with .class-name is clicked, the script toggles the overflow__hidden class on the <body> tag.
Adding overflow: hidden; to the body prevents the entire page from scrolling.
Troubleshooting
If the code doesn’t work, the most common issue is incorrect class naming.
For example, if the class name in Webflow Designer is Nav Button, you should write it as nav-button in your code.
Webflow automatically converts:
- Uppercase → lowercase
- Spaces → hyphens (
-)
So always adjust the class name accordingly when writing code.
Summary
By simply adding a small piece of code, matching your class names, and applying some CSS, you can easily disable scrolling in Webflow.
While this can’t be done with Webflow’s default settings, a few lines of code make it possible.
I also share more about using Webflow, building websites with it, and the benefits of running your business site on Webflow.
If you have any questions or need advice, feel free to reach out anytime through the contact form!
