EN IT
Home About Learn Blog

Disable Page Scrolling in Webflow (One CSS Rule)

Beginner 4:05 webflowcssnavbarscroll-lockhas-selector

Lock page scroll while the Webflow nav menu is open using a single CSS rule with :has() — no JavaScript, no libraries, no interactions.

Watch on YouTube

Key takeaways

  • When the Webflow nav menu opens, Webflow automatically adds a w--open class to the menu button — that's the hook for a pure-CSS scroll lock.
  • One rule does the whole job: body:has(.w-nav-button.w--open) { overflow: hidden } — no JavaScript, no external libraries.
  • The :has() selector lets the body react to a descendant's state, which is exactly what makes a JS-free scroll lock possible.
  • Where you paste the CSS decides its scope: Global Styles or the page head applies to one page; the Site Settings head applies to every page.
  • Skipping JavaScript keeps the solution lighter and more robust — one line of CSS instead of a script and a library.

Video chapters

  1. 00:00 Intro
  2. 00:33 The scrolling problem
  3. 01:58 The CSS solution
  4. 03:12 Testing it
  5. 03:38 Outro

By the end of this lesson you’ll be able to lock page scrolling while the Webflow nav menu is open — a small but important UX fix — using a single line of CSS and no JavaScript at all. It’s the kind of tidy solution that makes a mobile menu feel finished instead of janky.

The problem is familiar: you open the nav menu on mobile, but the page behind it still scrolls, which feels sloppy and lets people lose their place. The usual reflex is to reach for a script. You don’t need one — Webflow already gives you everything you need.

The key is a class Webflow adds for you automatically.

How it works

When you open a Webflow nav menu, Webflow adds a w--open combo class to the menu button (its base class is w-nav-button), and removes it when the menu closes. That toggling class is a perfect state signal — and modern CSS can read it.

The :has() selector lets a parent style itself based on what it contains. So we tell the body: “whenever you contain a nav button that’s currently open, hide your overflow.” That’s the entire trick — a state that already exists, read by a selector that already exists:

body:has(.w-nav-button.w--open) {
  overflow: hidden;
}

While the menu is open, the body can’t scroll; the moment it closes, w--open disappears and scrolling comes right back. No interactions, no library, no code of your own to maintain.

One thing to plan is scope, which depends on where you paste the rule. Drop it in your Global Styles component or a single page’s head (Page Settings) and it affects only that page. Paste it in the head code of the Custom Code tab under Site Settings and it applies everywhere. Then publish and test on the live link — the w--open class toggles on the real site.

How to use it

  1. Copy the rule — body:has(.w-nav-button.w--open) { overflow: hidden }.
  2. Pick your scope — for one page, use your Global Styles component or the page’s head; for the whole site, use the head code in Site Settings → Custom Code.
  3. Paste and publish — add the CSS in your chosen spot and publish the site.
  4. Test on the live page — open the nav menu and confirm the page can’t scroll, then close it and confirm scrolling returns.

That’s it — one clean CSS rule instead of a script, and a mobile menu that behaves exactly the way people expect.

Resources

Frequently asked questions

How do I stop the page from scrolling when the nav menu is open in Webflow?
Add one CSS rule: body:has(.w-nav-button.w--open) { overflow: hidden }. Webflow adds the w--open class to the menu button whenever the menu is open, so this locks the body's scroll while it's open and releases it when you close the menu — no JavaScript needed.
Can I lock page scroll in Webflow without JavaScript?
Yes. Because Webflow toggles a w--open class on the nav button, you can use the CSS :has() selector to set the body's overflow to hidden only while the menu is open. It's a clean, one-rule solution with no scripts or libraries.
Where should I paste the scroll-lock CSS in Webflow?
For a single page, put it in your Global Styles component or the page's head via Page Settings. To apply it across the whole site, paste it in the head code of the Custom Code tab in Site Settings.
What is the w--open class in Webflow?
It's a combo class Webflow automatically adds to the nav menu button (w-nav-button) while the menu is open, and removes when it closes. You can target it in CSS — like this scroll-lock rule — to react to the menu's open/closed state without writing any code of your own.

← Back to the course