In WordPress 7.0 wurde das Navigation Overlay als neue Option implementiert, um mehr Flexibilität bei der mobilen Menüführung zu bieten. Gerade bei Block Themes eröffnet diese neue Option zusätzliche Gestaltungsmöglichkeiten für Header und Navigation, damit sich Menüs auf Smartphones und Tablets besser an das jeweilige Design anpassen lassen.
Bis einschließlich WordPress 6.9 wirkte der Navigation Block für viele Anwendungsfälle noch recht mager, weil die mobile Menüführung nur begrenzt flexibel war. Mit der neuen Navigation-Overlay-Option in WordPress 7.0 wird das besser: Das Overlay lässt sich direkt im Site Editor mit Blöcken wie z. B. Button und Pattern gestalten und damit wesentlich individueller an das eigene Design anpassen.
Am besten wählst du das Template-Part für den Header und in dem Header dann den Navigation Block.
Wichtig ist auch der Hintergrund aus der Community: Mike McAlister hatte mit seinem Ollie-Theme bzw. den dazugehörigen Menü-Ansätzen früh gezeigt, wie viel mehr mit einem flexibleren Overlay möglich ist. Auf seiner Ollie-Seite beschreibt er, dass das klassische WordPress-Navigationsmenü für komplexere mobile Menüs zu eingeschränkt war und damit die Weiterentwicklung des Navigation Blocks sichtbar befördert.
Nachfolgend eine Anleitung zur Erstellung des Navigation-Overlays. Am Schluss dieses Beitrags zeige ich auch ein entsprechendes Beispiel im Video.
1. Website-Editor öffnen
Gehe im WordPress-Backend zu Design → Editor. Dort bearbeitest du die Vorlagen und Template-Teile deines Block Themes.
2. Header oder Navigation auswählen
Öffne den Bereich, in dem sich dein Header befindet. Wähle dort den Navigationsblock aus, der das Hauptmenü deiner Website enthält.
3. Navigationseinstellungen prüfen
Sobald der Navigationsblock markiert ist, erscheinen in der rechten Seitenleiste die Blockeinstellungen. Dort findest du die Optionen zur Navigation, darunter auch die Einstellungen für das Overlay-Menü.
4. Neue Overlay-Option aktivieren oder anpassen
In WordPress 7.0 kannst du die neue Overlay-Option gezielt konfigurieren. Je nach Theme und Block-Aufbau lässt sich damit steuern, ob das Menü als Overlay dargestellt wird und wie es sich beim Öffnen verhält.
5. Darstellung auf Mobilgeräten testen
Nach dem Speichern solltest du die Website auf einem Smartphone oder im Browser in einer kleinen Ansicht testen.
6. Feinjustierung vornehmen
Falls nötig, kannst du anschließend noch das Layout des Headers, die Abstände oder die Menüdarstellung anpassen.
Was sich dadurch verbessert
Die neue Option kann dafür sorgen, dass die mobile Navigation übersichtlicher, flexibler, besser anpassbar und auch angenehmer für die Nutzerführung gestaltet werden kann.
Besonders bei Websites mit vielen Menüpunkten oder einem kompakten Header kann das Overlay-Menü daher eine sinnvolle Option sein.
Beispiele für das Navigation-Overlay
Nachfolgend zeige ich die Erstellung eines einfachen Beispiels für ein Navigation-Overlay beim Standard Theme Twenty Twenty-Five. Richtig interessant wird die neue Option allerdings, wenn man damit beispielsweise Mega Menüs erstellen möchte, was durchaus möglich ist. Es gibt bereits einige Vorlagen, die mit den jeweiligen Block Themes geliefert werden.
Die Navigations-Overlays werden übrigens als eigene Vorlagen bzw. Template-Teile gespeichert:
Hier ein weiteres Navigation-Overlay, bei dem eingestellt ist, dass dieses Overlay immer gezeigt werden soll, also nicht nur mobil. Bei diesem Beispiel mit dem Block Theme Ollie gibt es zwei Spalten, wobei ich die Navigation in die linke Spalte und in der rechten Spalte einen Button mit den Socials unterhalb des Buttons eingefügt habe:
Übrigens …
Info
„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.
Zur Info: Das Plugin ist bereits hier auf haurand.com im Einsatz (siehe Header mit Navigation).
Fazit
Die neue Navigation-Overlay-Option in WordPress 7.0 ist für Block Themes eine sinnvolle Erweiterung. Damit erhält man mehr Kontrolle über die mobile Menüführung und die Möglichkeit, Navigation und Design harmonisch aufeinander abzustimmen. Wer die mobile Bedienung einer Website speziell bei umfangreicheren Menüs verbessern möchte, sollte sich diese Neuerung auf jeden Fall genauer ansehen.
Links, Quellen und aktuelle Infos
- https://make.wordpress.org/core/2026/03/04/customisable-navigation-overlays-in-wordpress-7-0/
- https://make.wordpress.org/test/2026/01/27/call-for-testing-customizable-navigation-mobile-overlays/
- Dave Smith erläutert im Youtube-Video die neuen Optionen für den Navigation Block: Demo Video: Navigation Overlays Walkthrough
- WordPress 7.0 Roadmap
- GitHub Tracking Issue #73084
- WordPress 7.0 – Navigation Overlay:
https://www.youtube.com/watch?v=ZZic1MaZGVY - https://haurand.com/navigation-ollie-menu-designer/
- https://wordpress.org/plugins/ollie-menu-designer/
Weitere Beiträge zum Thema
- WordCamp Mannheim 2026: Warum ich dabei bin
- Navigation Overlay in WordPress 7.0
- Revisionen in WordPress 7.0
- Block Themes und/oder klassische Themes?
- Block Themes: Abstand zwischen Header und Content
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.
Du kennst unseren Newsletter noch nicht? – Hier findest du eine Übersicht über die bisher versendeten Newsletter. Wenn du keine neuen Beiträge und WordPress-News verpassen möchtest, melde dich jetzt kostenlos für unseren Newsletter an. Den Newsletter bekommst du dann einmal am Anfang des Monats.
Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
Schreibe einen Kommentar