Navbar Breakpoint
Switch to the burger menu earlier — using exactly the tablet styling already in your project.
Wide menus run out of room earlier. With six or seven links up there it already gets tight at 1100 pixels — but Webflow does not switch until 991. This solution closes that gap without you building the mobile menu a second time.
- NavbarThe attribute marks the native Webflow navbar. Everything inside belongs to it, nested to any depth.
- Tablet stylingThe project CSS is checked for the rules that apply to exactly those elements at tablet size.
- Pulled upThose same rules now apply from your pixel value onwards — limited to this navbar.
Add this <script> to your project's custom code
Once per project is enough, even if you use the solution on several pages: Project Settings → Custom Code → Head Code. The script loads alongside the page without holding up rendering; it runs once the page is in place and does nothing while no fpu attribute is there.
<!-- FlowPowerUser · Navbar Breakpoint -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/navbar-breakpoint.js"></script>Put the attribute on the navbar
The attribute belongs on the native Webflow navbar component itself — not the container inside it, not the menu. In the Navigator that is the element labelled “Navbar”. If it lands next to it, the nearest navbar is looked up; I would not rely on that.
On the navbarNavbar component
Navbar fpu-navbar-element="navbar"
fpu-navbar-breakpoint="1100"
├─ Container
│ ├─ Brand
│ ├─ Nav Menu
│ │ ├─ Nav Link
│ │ └─ Nav Link
│ └─ Menu ButtonCheck that it works
Publish the page and slowly narrow the browser window. The switch has to happen at your value, not at 991. And it has to look the way it does on tablet — same background, same spacing, same font sizes. If it looks different, that styling is missing at the tablet breakpoint too.
OptionalTake the styling from a different breakpointDefault: tablet
In almost every Webflow project the navbar switches from tablet onwards — that is why it is the default and you need not set anything. If your navbar is configured differently in the Designer, name the source here.
On the navbar
tabletHow far down the styling is taken from. Webflow's breakpoints stack, so the ones above always come along: tablet takes 991 px, mobile landscape 991 and 767 px, mobile 991, 767 and 479 px. An unknown value falls back to tablet.falseWrites one line to the browser console: which source, which target value, and how many rules were carried over.Additional features
- Several navbars on one page
- Every marked navbar gets its own point and its own source. The rules carried over stay strictly with the navbar they belong to.
- Upwards only
- The value must be above the breakpoint the styling comes from. If you want the burger menu later rather than earlier, set that on the navbar itself in the Designer — no attribute needed.
- What does not come along
- The project CSS is read when the page loads. Styling from third-party sources the browser is not allowed to read for security reasons stays out — Webflow's own CSS is not affected by this.