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

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

Autor:

Kategorien: , , , , ,
Beitragsdatum: 21.01.2023 | Letztes Update: 12.11.2024

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.

Info

Leider ist das m. E. noch keine ideale Lösung. Offensichtlich funktioniert es nicht, wenn man bei dem Template-Teil die Einstellung „Sticky“ wählt. Ein Template-Teil muss zumindest z. Zt. immer noch gruppiert werden, damit das funktioniert – siehe auch das kurze Video.

In dem folgenden Issue wird das Problem auch beschrieben und offensichtlich wird daran gearbeitet. Weitere Links zum Issue habe ich weiter unten notiert.

Um das optisch noch etwas deutlicher zu machen, sollte man bei der übergeordneten Gruppe auch noch die Hintergrundfarbe (Background) entsprechend ändern, weil ansonsten der Hintergrund transparent ist. In dem folgenden Beispiel habe ich als Hintergrundfarbe schwarz eingestellt, die ich auch mit einer entsprechenden Transparenz versehen habe.

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

Update

10.4.2024: Mit einem leichtgewichtigen Plugin kann man jetzt bei Block Themes abgesehen von einem sticky header jetzt auch einen shrinked header erstellen. Was das ist und wie das geht, beschreibe ich in dem folgenden Beitrag.

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.

Wie das aussieht, kann man auf einer unserer Testinstanzen sehen.

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örtern.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

2 Antworten zu „Sticky Positionierung z. B. Header (Navigation) bei WordPress 6.2“

  1. Avatar von Patrick
    Patrick

    Das muss aber aber für das Template jeder Seitenart (also Start, Blog, etc) separat gemacht werde, nur so als Hinweis.

    1. Avatar von hgg
      hgg

      Das kann ich nicht bestätigen: Wenn man z. B. nur die Navigation Sticky haben möchte und auch nur einen Header mit der Sticky Gruppe verwendet, dann wird ja dieser Header bei allen Templates verwendet. Dementsprechend braucht dann tatsächlich nur diese Gruppe mit der Navigation sticky zu sein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert