FlowPowerUser

Navbar Breakpoint

v1.1.01,9 kB gzipkostenlos

Das Burger-Menü früher umschalten lassen — mit genau dem Tablet-Styling, das im Projekt schon steht.

Tutorial-Video
Lässt sich mit KI umsetzen — der Prompt ist vorbereitet
Live-Demo ansehenCloneable holen
Das Prinzip · Warum Navbar Breakpoint
3feste Punkte in Webflowpxjeder Wert, den du willst

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.

  1. NavbarDas Attribut markiert die native Webflow-Navbar. Alles darin gehört dazu, beliebig tief verschachtelt.
  2. Tablet-StylingIm Projekt-CSS wird nachgesehen, welche Regeln bei Tablet auf genau diese Elemente wirken.
  3. 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 → Footer Code. Das Skript lädt verzögert und startet nur, wenn es auf der Seite ein fpu-Attribut findet.

<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
AttributWertBeschreibung
Schaltet die Lösung für diese Navbar ein. Pflicht.
Breite in Pixeln, bis zu der das Burger-Menü aktiv ist. Erlaubt sind 320 bis 2560, und der Wert muss über dem Breakpoint liegen, von dem das Styling kommt. Pflicht.
Im Navigator
Navbar              fpu-navbar-element="navbar"
                    fpu-navbar-breakpoint="1100"
├─ Container
│  ├─ Brand
│  ├─ Nav Menu
│  │  ├─ Nav Link
│  │  └─ Nav Link
│  └─ Menu Button

Prü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.

OptionalBrauchst du nur, wenn du es brauchst — aufklappen
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

AttributWertStandardBeschreibung
tabletVon welchem Webflow-Breakpoint das Styling geholt wird — Tablet entspricht 991 px, Mobile Landscape 767 px, Mobile 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.
Mehr MöglichkeitenZusä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.

← ZurückForm Stepsfpu-form
Zurück zu allen Attributen