Sticky Header für 2025

Sticky Header. Für dein WordPress verwendest du das Theme Twenty Twenty-Five oder Twenty Twenty-Four? Und hättest gerne einen Header, der beim Scrollen oben bleibt? Kein Problem, ein Sticky Header ist in fünf Minuten gebaut. Mit einem kurzen CSS-Code, den du nur kopieren und an der richtigen Stelle einfügen musst.

Das Stilbuch öffnen

Los gehts mit der Öffnung des Stilbuchs.

1. Klicke in der schwarzen Menüleiste oben auf Website bearbeiten.
2. Klicke rechts oben auf das Icon mit dem Halbmond.

Mit dem Klick auf den Halbmond bist du im im Stilbuch angekommen.

CSS-Eingabebox anzeigen lassen

1. Klicke oben auf das „Ampel-Menü“, das Icon mit den drei Punkten,
2. Klicke auf Zusätzliches CSS.
3. Die Eingabebox für dein persönliches CSS erscheint.

CSS-Code kopieren

Kopiere den folgenden CSS-Code:

header.wp-block-template-part {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0);
    z-index: 10;
}

CSS-Code in die Box einfügen

Dann fügst du den kopierten CSS-Code in die CSS-Box ein.

Jetzt ist dein Header sticky. Er bleibt auch dann sichtbar, wenn deine Besucher nach unten scrollen. Hier siehst du ein Beispiel für einen Sticky Header: Band-Website 2Y2D.de.

Den CSS-Code habe ich mit diesen Themes getestet:

• Twenty Twenty-Four
• Twenty Twenty-Five

Weitere Option für einen Sticky Header

Die folgende Option funktioniert für alle Block-Themes, allerdings haben manche Browser mit der Darstellung Probleme:

Du gehst auf deine Startseite. Dann führst du folgende Schritte aus:

1. Klicke links oben auf die „Treppe“, um die Listenansicht zu öffnen.
2. Markiere die Header-Gruppe.

Weiter geht es dann nicht in der linken, sondern der rechten Seitenleiste.

1. Klicke auf Block (auch eine Gruppe wird von WordPress als Block bezeichnet)
2. Klicke auf Position.
3. Wähle Oben gehalten. Der Block wird nun oben am scrollbaren Bereich gehalten.

Zur Kontrolle: In der linken Spalte ist der Block, hier als Gruppe bezeichnet, nun mit einem Pin versehen. Der Block wird oben gehalten.