Plugin mit Shrinking Logo und Sticky Header für Block Themes

Plugin Dynamic Header & Navigation for Block Themes

„Dynamic Header & Navigation for Block Themes“ (vorheriger Name: „Shrinking Logo Sticky Header“) ist ein leichtgewichtiges WordPress-Plugin, das speziell für Block-Themes entwickelt wurde.
Es fügt einen modernen Sticky Header mit sanften, animierten Schrumpfeffekten für Header und Logo hinzu. Außerdem besteht die Möglichkeit, einen Breakpoint für das mobile Menü zu definieren und ab der Version 1.2 besteht eine Option für Off-Canvas.

Ich beschäftige mich schon sehr lange mit dem Thema bei Block Themes, weil die Gestaltungsmöglichkeiten bei der Navigation doch sehr beschränkt sind. Es gibt zwar schon einige Plugins in dem Bereich, die mir aber nicht ausreichten und/oder Optionen bieten, die ich nicht benötige.

Info

Information in English about the plugin can be found here.

Update

5.1.2026: Am Wochenende habe ich eine neue Version (1.5) meines Plugins „Dynamic Header & Navigation for Block Themes” veröffentlicht. Endlich habe ich es geschafft, ein Problem zu lösen: Wenn ich fast bis zum Anfang einer Website gescrollt bin, fing der Header an zu flackern. Das ist nun behoben.
Es gibt jetzt auch eine Option für eine Live-Vorschau (Blueprint) auf wordpress.org:

„„Dynamic Header & Navigation for Block Themes“ – Plugin Directory“ von WordPress.org anzeigen

Hier klicken, um den Inhalt von WordPress.org anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Inhalt von WordPress.org immer anzeigen

„„Dynamic Header & Navigation for Block Themes“ – Plugin Directory“ direkt öffnen

Optionen des Plugins

• Höhe für Kopfzeile festlegen
• Höhe für geschrumpfte Kopfzeile festlegen
• Logo-Verkleinerungsfaktor festlegen
• Logo nach links verschieben (zugefügt in Version 1.3)
• Animationsdauer (in Sekunden) für die schrumpfende Kopfzeile festlegen
• Option, um einen Breakpoint für die Navigation zu setzen (zugefügt in Version 1.1)
• Option, um Off-Canvas zu setzen (hinzugefügt in Version 1.2)
• Option für die Geschwindigkeit des Off-Canvas-Einblendens (zugefügt in Version 1.3.1)
• Option zum Deaktivieren des inneren Abstands (Padding) in der Kopfzeile (hinzugefügt in Version 1.4)
• Option zum Aktivieren von Text unter dem Mobilgeräte-Symbol und Anzeigen eines größeren Mobilgeräte-Menü-Symbols (Hamburger) – besser aus Gründen der Barrierefreiheit (hinzugefügt in Version 1.4)
• Option zum Beschriften von Text (hinzugefügt in Version 1.4)
• Option: Das Menü erscheint auf Mobilgeräten nicht als oben gehaltenes Menü – dies kann aus Gründen der Barrierefreiheit vorteilhaft sein (hinzugefügt in Version 1.4.1)

Nachfolgend eine Präsentation des Plugins. Das Backend ist allerdings englischsprachig:

Was ist ein „Shrinking sticky Header bzw. Logo“?

Beim Scrollen verkleinern sich Header und Logo automatisch. Dadurch wird der Platz auf dem Bildschirm maximiert und die Navigation bleibt leicht zugänglich, ohne das Surferlebnis zu beeinträchtigen. Es besteht außerdem die Möglichkeit, den Haltepunkt flexibel zu setzen.

Update

26.6.2025: Ich habe gerade Version 1.3 im WordPress-Repository hochgeladen.
Neue Optionen:

• Hinzugefügt: Optionale Einstellung der Hintergrundfarbe für die Kopfzeile
• Hinzugefügt: Optionale Einstellung zum Verschieben des verkleinerten Logos nach links

Hier kannst du die Version 1.3 des Plugins unter https://space4.yd-sgs.de/ sehen.

Ich habe das Plugin am 1. Mai 2025 zum Review ins WordPress-Repository gestellt. Das Review-Team hatte einige Verbesserungsvorschläge, die ich umgesetzt habe. Am 11. Mai habe ich das Plugin erneut zur Überarbeitung ins WordPress-Repository hochgeladen

Update

17.5.2025: Der Überprüfungsprozess ist abgeschlossen: „Herzlichen Glückwunsch, die Plugin-Hosting-Anfrage für Shrinking Logo Sticky Header wurde genehmigt.“

19.5.2025: Das Plugin ist jetzt im WordPress-Repository (Version 1.1).

23.5.2025: Version 1.2 mit Off-Canvas-Menu

Mit dem Plugin kannst du die Höhe von Header und Logo sowohl im normalen als auch im verkleinerten Zustand individuell konfigurieren und hast so die volle Kontrolle über das Erscheinungsbild deiner Website.
Diese Einstellungen lassen sich ganz einfach an deine Branding- oder Designvorlieben anpassen.

Hintergrundfarbe des Headers ändern

Notwendig ist allerdings, dass du in deinem Block Theme die Hintergrundfarbe der Navigation über den Block Editor z. B. auf weiß änderst, weil ansonsten der Header standardmäßig in den meisten Fällen transparent ist.

Wie das funktioniert, zeige ich in dem folgenden kurzen Video:

Einen ausführlichen Beitrag zu diesem Thema findest du hier: Hintergrundfarbe des Headers bei Block Themes ändern

Einfache Konfiguration

Einer der Hauptvorteile des Plugins ist seine Einfachheit:
Nach der Aktivierung funktionieren die Sticky- und Shrinking-Effekte grundsätzlich bei fast allen Block Themes sofort – es ist keine zusätzliche Einrichtung oder Konfiguration erforderlich.
Das macht es ideal für Anwender, die einen professionellen, dynamischen Header-Effekt wünschen, ohne sich mit komplexen Optionen oder benutzerdefiniertem Code auseinandersetzen zu müssen.

Wir verwenden auf dieser Website das Circles WP Theme mit dem Plugin. Das Twenty Twenty-Three Theme wird ebenfalls mit dem Plugin auf einer anderen Website verwendet. Weitere Websites (einschließlich Twenty Twenty-Five) werden in Kürze folgen. Ich habe das Plugin bereits mit vielen Block Themes wie Twenty Twenty-Five, Twenty Twenty-Four und Greyd WP getestet.

Optionen in Version 1.1: Option zum Setzen von Breakpoints

In Version 1.1 habe ich auch eine Option zum Festlegen des Breakpoints für das mobile Menü integriert.

Für das Plugin ist bereits eine deutsche Übersetzung verfügbar.

In diesem kurzen Video zeige ich, welche Anpassungen und Einstellungen bei der Nutzung des Plugins möglich sind. Wichtig ist auch, die Hintergrundfarbe für den Header festzulegen, da dieser sonst beim Scrollen transparent wird. In diesem Beispiel habe ich Weiß als Hintergrundfarbe gewählt.

Optionen in Version 1.2

In Version 1.2 habe ich eine Option für das Off-Canvas-Menüs eingebaut: Ein Off-Canvas-Menü ist ein verstecktes Navigationsfeld, das von der Seite des Bildschirms von rechts eingeblendet wird und einen platzsparenden Zugriff auf Menüoptionen ermöglicht, ohne den Hauptinhaltsbereich zu überladen.

Diese Option könnt ihr im mobilen Menü auf der folgenden Präsentationsseite mit dem Circles WP Theme und hier auf haurand.com schon sehen, wenn ihr das mobile Menü öffnet.

Weil die Bezeichnung „Shrinking Logo Sticky Header“ für das Plugin nicht mehr den Umfang der Optionen wiedergibt, habe ich die Bezeichnung bei der Version 1.2 geändert. Also nicht wundern.

Optionen in Version 1.3

Bisher konnte es je nach Aufbau des Headers sein, dass das Logo speziell bei der mobilen Darstellung wegen des Schrumpfungsfaktors zu weit nach rechts gerückt wurde. Das kann man jetzt durch die neue Einstellung in Version 1.3 korrigieren. Dazu kann man in Stufen von 0.1 Schritten (rem) dafür sorgen, dass das Logo nach links gerückt wird. Ein Beispiel dazu in dem folgenden Video:

Darüber hinaus kannst du nun auch die Hintergrundfarbe für die Kopfzeile aktivieren, die vom Block-Theme bereitgestellt wird. Es wird jedoch empfohlen, die Einstellung direkt über den Website-Editor vorzunehmen:

Sticky deaktivieren bzw. auf eingestellten Wert setzen

Das Plugin kann auch dann mit Optionen wie beispielsweise Off-Canvas und einem gesetzten Breakpoint verwendet werden, wenn man z. B. keinen Sticky Header haben möchte. Um die Einstellung aus dem Template Part Header, der über den Website-Editor gesetzt ist, zu übernehmen, reicht die folgende CSS-Regel unter Zusätzliches CSS aus:

header.wp-block-template-part {
    position: inherit;
}

Zusätzliches CSS bei Block Themes eintragen

Dazu klickt man unter Design > Editor oben rechts auf „Stile“ (der Halbmond – 1), dann auf die drei senkrechten Punkte (2) und schließlich auf die Option „Zusätzliches CSS“.

Eine weitere und damit die sicher schnellste Option ist die Eingabe über die Tastatur (Befehlspalette) mit (Strg/Cmd+K) und Eingabe „CSS“. Anschließend wird sofort „Individuelles CSS öffnen“ angeboten.

Ich freue mich über Rückmeldungen zu dem Plugin – entweder über einen Kommentar in diesem Beitrag, oder eine Frage in dem Support-Bereich zu dem Plugin.

Info

Besonders freue ich mich natürlich über eine Bewertung zum Plugin auf der folgenden Seite.

Beispiel mit zwei Menüs auf speziellen Seiten

• ich habe ein Template auf Basis von Pages erstellt mit einem zweiten Menü unterhalb.
• dieses Template habe ich den entsprechenden Seiten im zweiten Menü zugewiesen.

Danke

• @threadi für Codeverbesserungen
• @apermo für Tipps
• @wpgerd für Testen
• @patriciabt und @laboiteare für französische Übersetzung

Veröffentlichungen zum Plugin

• https://wp-content.co/newsletter/archive/221/
• https://thewpweekly.com/issue-244/
• https://gutenbergtimes.com/14-plugins-for-the-block-editor-gutenberg-20-8-studio-1-15-1-woo-9-9-and-more-weekend-edition-330/
• https://www.painelwp.com.br/newsletter-wordpress-edicao-315/
• https://gutenbergtimes.com/roadmap-for-wordpress-6-9-block-bindings-mega-menus-and-more-weekend-edition-336/
• https://wp-rankings.com/plugins/shrinking-logo-sticky-header/

Websites, auf denen das Plugin verwendet wird

Auf den folgenden Websites wird das Plugin bereits eingesetzt (Stand 17.9.2025):

• https://seniorensport-attendorn.de/
• https://bogensportfreunde-attendorn.de/
• https://mg-heute.de (mit Zeile oberhalb des Headers)
• https://hf-grevenbrueck.de/
• https://hypnose-fuer-dich.de/ (mit Zeile oberhalb des Headers)
• https://space4.yd-sgs.de/
• https://wpmeetup-suedsauerland.de/ (mit Zeile oberhalb des Headers)
• https://haurand.com
• https://zaw-koeln.de/

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

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.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.