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.
Navbar Breakpoint
v1.1.01,9 kB gzipfree
Switch to the burger menu earlier — using exactly the tablet styling already in your project.
You can build this with AI — the prompt is ready
The principle · Why Navbar Breakpoint
3fixed points in Webflowpxany value you want
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.
- HochgezogenThose 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 → Footer Code. The script loads deferred and only starts when it finds a fpu attribute on the page.
<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
AttributeValueDescription
Turns the solution on for this navbar. Required.
Width in pixels up to which the burger menu is active. Allowed range is 320 to 2560, and the value must be above the breakpoint the styling comes from. Required.
In the Navigator
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.
OptionalOnly needed when you need it — expand
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
AttributeValueDefaultDescription
tabletWhich Webflow breakpoint the styling is taken from — tablet is 991 px, mobile landscape 767 px, mobile 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.More capabilitiesAdditional features
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.