Navbar Breakpoint
Das Burger-Menü früher umschalten lassen — mit genau dem Tablet-Styling, das im Projekt schon steht.
Breite Menüs brauchen früher Platz. Sobald sechs oder sieben Links im Kopf stehen, wird es schon bei 1100 Pixeln eng — Webflow schaltet aber erst bei 991 um. Genau diese Lücke schließt die Lösung, ohne dass du das mobile Menü ein zweites Mal bauen musst.
- NavbarDas Attribut markiert die native Webflow-Navbar. Alles darin gehört dazu, beliebig tief verschachtelt.
- Tablet-StylingIm Projekt-CSS wird nachgesehen, welche Regeln bei Tablet auf genau diese Elemente wirken.
- HochgezogenDieselben Regeln gelten ab sofort schon ab deinem Pixelwert — begrenzt auf diese Navbar.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Navbar Breakpoint -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/navbar-breakpoint.js"></script>Attribut auf die Navbar setzen
Das Attribut gehört auf die native Webflow-Navbar-Komponente selbst — nicht auf den Container darin und nicht auf das Menü. Im Navigator ist das das Element, das im Designer „Navbar“ heißt. Trifft es einmal daneben, wird die nächstgelegene Navbar gesucht; verlassen würde ich mich darauf nicht.
Auf die NavbarNavbar-Komponente
Navbar fpu-navbar-element="navbar"
fpu-navbar-breakpoint="1100"
├─ Container
│ ├─ Brand
│ ├─ Nav Menu
│ │ ├─ Nav Link
│ │ └─ Nav Link
│ └─ Menu ButtonPrüfen, ob es greift
Seite veröffentlichen und das Browserfenster langsam schmaler ziehen. Der Umschlag muss bei deinem Wert kommen, nicht erst bei 991. Und er muss so aussehen wie auf dem Tablet — gleicher Hintergrund, gleiche Abstände, gleiche Schriftgrößen. Sieht es anders aus, fehlt dem Tablet-Breakpoint dieses Styling auch dort.
OptionalStyling von einem anderen Breakpoint holenStandard: Tablet
In fast jedem Webflow-Projekt schaltet die Navbar ab Tablet um — deshalb ist das der Standard, und du musst nichts angeben. Ist deine Navbar im Designer anders eingestellt, sag hier, von wo das Styling kommen soll.
Auf die Navbar
tabletBis zu welchem Webflow-Breakpoint hinunter das Styling geholt wird. Die Breakpoints stapeln sich, deshalb kommen die darüberliegenden immer mit: Tablet nimmt 991 px, Mobile Landscape 991 und 767 px, Mobile 991, 767 und 479 px. Ein unbekannter Wert fällt auf Tablet zurück.falseSchreibt eine Zeile in die Browser-Konsole: welche Quelle, welcher Zielwert und wie viele Regeln übernommen wurden.Zusätzliche Features
- Mehrere Navbars auf einer Seite
- Jede markierte Navbar bekommt ihren eigenen Punkt und ihre eigene Quelle. Die übernommenen Regeln bleiben streng bei der Navbar, zu der sie gehören.
- Nur nach oben
- Der Wert muss über dem Breakpoint liegen, von dem das Styling kommt. Wer das Burger-Menü später statt früher will, stellt das direkt an der Navbar im Designer ein — dafür braucht es kein Attribut.
- Was nicht mitkommt
- Gelesen wird das Projekt-CSS beim Laden der Seite. Styling aus fremden Quellen, die der Browser aus Sicherheitsgründen nicht auslesen darf, bleibt außen vor — Webflows eigenes CSS ist davon nicht betroffen.