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:
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.
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
- Begin of Diskussion „Fixed Position Header and Footer Template Parts #30121“ in Mar 23, 2021:
https://github.com/WordPress/gutenberg/issues/30121 - What’s new in Gutenberg 15.0? (18 January):
https://make.wordpress.org/core/2023/01/20/whats-new-in-gutenberg-15-0-18-january/ - Gutenberg 15.0 Introduces “Sticky” Position Block Support, Adds “Paste Styles” Option:
https://wptavern.com/gutenberg-15-0-introduces-sticky-position-block-support-adds-paste-styles-option - Sticky Header: Themes Twenty Twenty-Two, Twenty Twenty-Three und Twenty Twenty mit ein paar CSS-Regeln aufpimpen:
https://haurand.com/twenty-twenty-sticky-header/
Weitere Beiträge zum Thema
- Navigation-Block bei WordPress 6.2: Tipps und Stolperstellen
- Sticky Positionierung z. B. Header (Navigation) bei WordPress 6.2
- Navigation im Cover-Block bei Twenty Twenty-Three
- Custom CSS im Site Editor bei Block Themes (WordPress 6.2)
- Schriften (Fonts) mit Create Block Theme am Beispiel Twenty Twenty-Three einbinden
Mehr erfahren auf dieser 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)