Sticky Positionierung z. B. Header (Navigation) bei WordPress 6.2

Sticky Positionierung von Blöcken (z. B. Header mit Navigation) bei WordPress 6.2

Insbesondere bei der Navigation, also dem Menü hatte ich mir schon immer bei Block Themes wie z. B. Twenty Twenty-Three gewünscht, dass die Zeile oben „angeklebt“ bleibt. Sticky Positionierung wurde jetzt mit Gutenberg 15.0 realisiert und wird wohl auch noch in WordPress 6.2 einfließen. Dementsprechend benötigt man bei Block Themes wie z. B. Twenty Twenty-Three keine CSS-Regeln oder zusätzlichen Plugins mehr, um z. B. einen sticky header mit dem Menü zu verwirklichen.

Sticky Positionierung (z. B. Header mit Menü) bei WordPress 6.2

Zunächst mal: Was ist ein „Sticky Header“?
In der Regel hat man oben eine Menüzeile. Scrollt man runter, ist die Menüzeile weg. Wenn der Block (z. B. das Menü) auch beim Herunterscrollen der Seite im Ansichtsfenster (viewport) bleiben soll, dann wird das als „sticky“ bezeichnet. Auf unserer Website kannst du das sehen, wenn du weiter runterscrollst: Das Menü bleibt daher immer oben positioniert.
Es gibt massenweise Plugins mit vielen Einstellungsmöglichkeiten, die man in dem Fall nutzen könnte. Bis jetzt habe ich das immer mit ein paar CSS-Regeln umgesetzt. Ein zusätzliches Plugin ist nicht notwendig und mit WordPress 6.2 jetzt in der Regel auch überflüssig.

Wie das aussieht möchte ich anhand eines Beispiels erläutern:

Beispiel für Sticky Positionierung des Header mit Menue bei einem Block Theme (Twenty Twenty-Three)
Sticky Positionierung des Header mit Menue bei einem Block Theme (Twenty Twenty-Two)

Sticky Positionierung des Headers mit Menue

Zunächst ist es wichtig, dass der gewünschte Bereich gruppiert wird. Wenn ich also ein Template-Part „Haupt-Menüleiste“ mit der enthaltenen Navigation mit der Position „sticky“ versehen will, dann muss diese Menüleiste in eine Gruppe gepackt werden.

Danach kann man bei den Eigenschaften des Gruppen-Blocks auf das Zahnrad (Settings) klicken und findet weiter unten die Einstellung für „Position“. Dort kann man zwischen den Einstellungen „Standard“ oder „Oben gehalten“ (sticky) auswählen. Nachdem man die Einstellung auf „Oben gehalten“ geändert hat, bleibt die Menüleiste im Viewport.

Um das optisch noch etwas deutlicher zu machen, kann man bei der übergeordneten Gruppe auch noch die Hintergrundfarbe (Background) entsprechend ändern. In dem folgenden Beispiel habe ich die Hintergrundfarbe auch mit einer entsprechenden Transparenz versehen.

Beispiel für Sticky Positionierung des Header bei einem Block Theme (Twenty Twenty-Three)
Beispiel für Sticky Positionierung des Header bei einem Block Theme (Twenty Twenty-Three) – WordPress 6.2

Fazit

Endlich wurde eine Option realisiert, die ich schon lange beim Full Site Editing (FSE) vermisst habe. Bis dato musste man mit CSS-Regeln oder zusätzlichen Plugins dafür sorgen, dass der Header bei Block Themes sticky, also „festgeklebt“ war. Das geht jetzt mit Bordmitteln. Allerdings ist es wichtig, dass die entsprechenden Blöcke gruppiert sein müssen.

Links und Quellen

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Sticky Positionierung des Header mit Menue bei einem Block Theme (Twenty Twenty-Three)


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (78) Anleitung (39) Block-Editor (34) Full Site Editing (20) Keine Anzeige (1) Plugins (25) Theme (13) Tipps (49) WordPress (80)

Schreibe einen Kommentar