GeneratePress: Unterschiedliche Hauptmenüs für Desktop und Mobil

Ein großes Desktop-Mega-Menü funktioniert auf einem Smartphone oft schlecht: zu viele Spalten, zu viele Unterpunkte, zu breite Inhalte. In GeneratePress lässt sich deshalb ein komplett anderes Hauptmenü für Mobilgeräte verwenden. Das ist sauberer als ein riesiges Desktop-Menü nur per CSS zu verstecken.

GeneratePress dokumentiert dafür bis heute einen offiziellen Weg über den Mobile Header. Dieser ersetzt auf kleinen Bildschirmen den normalen Website-Header durch eine kompaktere Variante. Anschließend kann man dieser mobilen Kopfzeile einen eigenen WordPress-Menüplatz zuweisen.

Was ist der Mobile Header?

Der Mobile Header ist eine separate, für kleine Displays gedachte Kopfzeile. Er kann den normalen Desktop-Header auf Smartphones ersetzen und typischerweise aus einem kleinen Logo beziehungsweise Seitentitel und der mobilen Navigation bestehen.

GeneratePress führt die Funktion aktuell als Bestandteil von Menu Plus in GP Premium. Der Standard-Breakpoint liegt bei 768 Pixeln und kann angepasst werden.

Mobile Header ist nicht dasselbe wie die normale mobile Navigation

GeneratePress besitzt auch ohne einen separaten Mobile Header eine mobile Navigation: Ab einem bestimmten Breakpoint wird die Desktopnavigation in ein Hamburger-Menü umgewandelt.

Der Mobile Header geht weiter. Er ersetzt den normalen Headerbereich auf Mobilgeräten durch eine eigene kompakte Kopfzeile. Genau diese getrennte Struktur macht es möglich, ein anderes Menü zuzuweisen.

Wann ein getrenntes Mobilmenü sinnvoll ist

Ein eigenes mobiles Menü lohnt sich vor allem, wenn das Desktopmenü:

  • als Mega-Menü mit mehreren Spalten aufgebaut ist,
  • viele Unterebenen enthält,
  • Bilder, Icons oder zusätzliche Inhalte enthält,
  • auf dem Smartphone nur schwer bedienbar wäre,
  • andere Prioritäten als die mobile Navigation besitzt.

Auf Mobilgeräten reichen häufig wenige Hauptpunkte wie Leistungen, Kontakt, Über uns und ein klarer Call-to-Action.

Schritt 1: Mobile Header aktivieren

Bei GeneratePress Premium findest du die Einstellung in der klassischen Theme-Konfiguration unter:

Design → Customizer → Layout → Header → Mobile Header

Aktiviere den Mobile Header und prüfe anschließend im Frontend, ob auf einem schmalen Browserfenster tatsächlich die mobile Kopfzeile erscheint.

Schritt 2: Eigenen WordPress-Menüplatz registrieren

WordPress muss zunächst wissen, dass es einen zusätzlichen Menüplatz namens „Mobile Menu“ gibt. GeneratePress zeigt dafür aktuell diesen Ansatz in seiner offiziellen Dokumentation:

add_action( 'init', function() {
    register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
} );

Diesen PHP-Code solltest du nicht direkt in die functions.php des Parent-Themes schreiben. Ein Theme-Update würde die Änderung überschreiben.

Geeignete Orte sind:

  • ein Child-Theme,
  • ein seriöses Code-Snippet-Plugin,
  • eine eigene kleine Site-Plugin-Lösung.

Schritt 3: Dem Mobile Header den neuen Menüplatz zuweisen

Nun sagt ein GeneratePress-Filter dem Mobile Header, dass er nicht das normale primäre Menü, sondern den neuen Menüplatz verwenden soll:

add_filter( 'generate_mobile_header_theme_location', function() {
    return 'mobile-menu';
} );

Beide Snippets können zusammen eingefügt werden.

Kompletter Code

add_action( 'init', function() {
    register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
} );

add_filter( 'generate_mobile_header_theme_location', function() {
    return 'mobile-menu';
} );

Schritt 4: Zweites Menü in WordPress anlegen

Danach gehst du in WordPress zu Design → Menüs beziehungsweise zur aktuell verwendeten Menüverwaltung und legst ein neues Menü an, zum Beispiel:

Mobilmenü

Dieses Menü kann völlig anders aufgebaut sein als die Desktopnavigation.

Schritt 5: Menü dem neuen Standort zuweisen

In den Menüeinstellungen sollte jetzt ein zusätzlicher Standort Mobile Menu verfügbar sein. Weise dein neues Mobilmenü diesem Standort zu.

Das Desktopmenü bleibt weiterhin am bisherigen primären Menüplatz.

Beispiel für eine sinnvolle Trennung

Desktop:

  • Leistungen als Mega-Menü mit acht Unterkategorien
  • Branchen
  • Referenzen
  • Ratgeber
  • Über uns
  • Kontakt

Mobil:

  • Leistungen
  • Ratgeber
  • Über uns
  • Kontakt

Das Mobilmenü darf bewusst einfacher sein. Eine Smartphone-Navigation muss nicht die visuelle Struktur eines Desktop-Mega-Menüs kopieren.

Warum nicht einfach dieselben Menüpunkte per CSS verstecken?

CSS-Klassen wie hide-on-mobile können für einzelne Menüeinträge praktisch sein. Sie sind aber nicht immer die beste Lösung für zwei grundsätzlich unterschiedliche Strukturen.

Wenn ein komplexes Mega-Menü technisch weiterhin im HTML vorhanden ist und nur ausgeblendet wird, bleibt die komplette Menüstruktur im Quelltext. Bei großen Menüs ist ein tatsächlich getrenntes Mobilmenü oft übersichtlicher.

Wann CSS trotzdem reicht

Wenn Desktop und Mobil fast identisch sind und du nur zwei oder drei Punkte unterschiedlich anzeigen möchtest, kann eine Sichtbarkeitsklasse ausreichend sein.

Beispiel:

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

Für ein großes Mega-Menü würde ich dagegen das getrennte Menü bevorzugen.

Breakpoint anpassen

GeneratePress verwendet für die mobile Navigation standardmäßig 768 Pixel. Bei GP Premium lässt sich der Breakpoint in den Navigationseinstellungen anpassen.

Das kann sinnvoll sein, wenn dein Desktop-Mega-Menü bereits auf kleineren Laptops oder Tablets nicht mehr sauber passt. Dann kann der mobile Header beispielsweise schon bei 900 oder 1024 Pixeln einsetzen.

Tablet und Smartphone müssen nicht zwingend dasselbe bekommen

Mit dem normalen GeneratePress-Mobile-Header gibt es einen gemeinsamen Umschaltpunkt. Wenn du drei komplett verschiedene Menüs für Desktop, Tablet und Smartphone brauchst, wird die Logik komplexer und sollte gezielt geplant werden.

Oft reicht eine gute responsive Trennung in zwei Gruppen:

  • große Bildschirme: Desktop-Mega-Menü
  • kleinere Bildschirme: vereinfachtes Mobile-Menü

Was passiert mit dem Logo?

Der Mobile Header kann ein eigenes kleines Logo beziehungsweise Branding verwenden. GeneratePress empfiehlt für die mobile Kopfzeile eher kompakte Logos, weil die Headerhöhe sonst unnötig groß wird.

Das ist besonders praktisch, wenn das Desktoplogo breit ist und auf dem Smartphone zu viel Platz benötigt.

Sticky Mobile Header

Der Mobile Header kann auch sticky verwendet werden. Dann bleibt die Navigation beim Scrollen erreichbar. GeneratePress bietet zusätzlich die Möglichkeit, den Sticky Header beim Herunterscrollen auszublenden und beim Hochscrollen wieder einzublenden.

Das spart auf kleinen Displays wertvolle Höhe.

Off-Canvas-Menü als Ergänzung

Für ein umfangreicheres mobiles Menü kann ein Off-Canvas-Panel angenehmer sein als ein klassisches Dropdown. Dabei öffnet sich die Navigation seitlich beziehungsweise als eigenes Panel.

Auch hier gilt: Die Struktur sollte mobil einfacher werden, nicht nur anders aussehen.

Untermenüs mobil richtig bedienen

GeneratePress nutzt in der mobilen Navigation Dropdown-Pfeile zum Öffnen von Untermenüs. Wenn ein Elternpunkt selbst keinen wichtigen Link besitzt, kann eine reine Aufklappfunktion sinnvoll sein. Bei einem echten Linkziel sollte dagegen klar bleiben, wie Nutzer sowohl den Link öffnen als auch das Untermenü anzeigen können.

Nach der Umstellung testen

Prüfe mindestens:

  • Desktop mit großem Bildschirm,
  • kleiner Laptop,
  • Tablet hoch und quer,
  • Smartphone,
  • Tastaturbedienung,
  • lange Untermenüs.

Besonders wichtig: Das mobile Menü darf keine Links verlieren, die für Besucher unverzichtbar sind.

Typische Fehler

  • Mobile Header nicht aktiviert: Der Filter hat dann keinen sichtbaren Effekt.
  • Menüplatz registriert, aber kein Menü zugewiesen: Das mobile Menü bleibt leer.
  • Code im Parent-Theme: Änderung verschwindet beim Update.
  • Breakpoint falsch: Mega-Menü erscheint noch auf einem zu schmalen Tablet.
  • Cache: Alte Navigation bleibt nach Änderung sichtbar.

Was ist die beste Lösung für ein Mega-Menü?

Bei einem echten Desktop-Mega-Menü ist ein separates mobiles Hauptmenü meistens die sauberste Lösung. Mobil sollte nicht versucht werden, ein mehrspaltiges Desktopkonzept zusammenzuquetschen. Ein einfaches Listen- oder Off-Canvas-Menü ist schneller zu erfassen und mit dem Finger besser bedienbar.

Fazit

GeneratePress kann unterschiedliche Hauptmenüs für Desktop und Mobil verwenden. Der offizielle Weg führt über den Mobile Header, einen zusätzlichen WordPress-Menüplatz und den Filter generate_mobile_header_theme_location. So bleibt das große Desktop-Mega-Menü unverändert, während Smartphones eine eigene, bewusst reduzierte Navigation erhalten. Für zwei wirklich unterschiedliche Strukturen ist das übersichtlicher als ein einziges Menü mit vielen CSS-Ausblendungen.

Aktuell geprüft

Der Menüplatz-Code, der GeneratePress-Filter, die Mobile-Header-Funktion und der standardmäßige mobile Breakpoint wurden mit der aktuellen offiziellen GeneratePress-Dokumentation abgeglichen.