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.

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.

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

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:

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.

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.

Weitere Optionen

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.

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.

Danke

• @threadi für Codeverbesserungen
• @apermo für Tipps
• @wpgerd für Testen

Weitere Beiträge zum Thema

Nachfolgend liste ich Beiträge auf, bei denen ich mich (zum Teil auch nur am Rande) mit dem Thema beschäftigt habe:

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.

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.

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