GeneratePress: Menüpunkt mit Untermenü sitzt tiefer – so korrigierst du es

Ein häufiger kleiner, aber auffälliger Darstellungsfehler in GeneratePress: Ein Menüpunkt mit Untermenü sitzt ein paar Pixel tiefer als ein normaler Menüpunkt. Auf den ersten Blick wirkt es so, als wäre die gesamte Menüzeile falsch ausgerichtet. Tatsächlich liegt die Ursache meistens nicht am Menütext selbst, sondern am zusätzlichen Dropdown-Toggle, den GeneratePress bei Menüpunkten mit Unterelementen einfügt.

Genau dieses Problem tauchte in meinem ursprünglichen Gemini-Chat auf: Menüpunkte ohne Untermenü waren sauber ausgerichtet, während ein Menüpunkt mit Unterelementen sichtbar etwas tiefer stand. Die erste Vermutung war die Icon-Ausrichtung. Das ist häufig richtig, aber nicht die einzige mögliche Ursache. Deshalb lohnt sich eine systematische Prüfung.

Warum Menüpunkte mit Untermenü anders gerendert werden

Ein normaler Menüpunkt besteht im Wesentlichen aus einem Link. Ein Menüpunkt mit Untermenü erhält zusätzlich einen Toggle bzw. Pfeil. Dadurch unterscheiden sich HTML-Struktur und CSS-Regeln.

Typisch sind Klassen wie:

.menu-item-has-children
.dropdown-menu-toggle
.gp-icon

Der zusätzliche Toggle beeinflusst je nach Theme-Version und eigener CSS-Anpassung:

  • Zeilenhöhe
  • vertikale Ausrichtung
  • Innenabstand links und rechts
  • Breite des Links
  • Position des SVG-Pfeils
  • Flex- oder Inline-Ausrichtung

GeneratePress bietet für Navigationselemente eigene Padding- und Stilregeln. In der aktuellen GeneratePress-Dokumentation sind für normale Menüelemente und Untermenüelemente getrennte Styling-Bereiche vorgesehen. Dadurch kann bereits eine kleine Abweichung bei Padding oder Font-Metrik sichtbar werden.

Erster Test: Liegt es wirklich am Dropdown-Pfeil?

Öffne die Seite im Browser und rufe mit F12 oder über Rechtsklick → Untersuchen die Entwicklertools auf. Wähle den betroffenen Menüpunkt aus.

Vergleiche einen normalen Menüpunkt mit einem Menüpunkt, der die Klasse menu-item-has-children besitzt. Achte besonders auf:

  • line-height
  • padding-top und padding-bottom
  • display
  • align-items
  • vertical-align

Wenn der Link selbst dieselben Werte hat, der Menüpunkt mit Untermenü aber trotzdem tiefer erscheint, ist der Dropdown-Toggle der wahrscheinlichste Kandidat.

Die saubere CSS-Lösung

Im ursprünglichen Verlauf funktionierte die Idee, den Toggle konsequent vertikal zu zentrieren. Dafür eignet sich eine Regel wie:

.main-navigation .menu-item-has-children .dropdown-menu-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

.main-navigation .gp-icon svg {
    vertical-align: middle;
}

Der entscheidende Punkt ist inline-flex zusammen mit align-items: center. Dadurch orientiert sich der Pfeil nicht mehr an einer möglicherweise ungünstigen Text-Baseline, sondern wird innerhalb seines eigenen Bereichs sauber zentriert.

Nicht sofort mit top:-2px korrigieren

Eine schnelle optische Korrektur wäre zum Beispiel:

.dropdown-menu-toggle {
    position: relative;
    top: -2px;
}

Das kann funktionieren, ist aber meistens nur ein kosmetischer Patch. Ändert sich später die Schriftart, Schriftgröße oder Menü-Höhe, stimmt der Wert möglicherweise nicht mehr. Besser ist es, die eigentliche Ursache bei Zeilenhöhe, Flex-Ausrichtung oder Padding zu beheben.

Menu Item Height und Padding prüfen

Bei älteren GeneratePress-Konfigurationen beziehungsweise im klassischen Customizer lohnt sich zusätzlich die Kontrolle der Navigationshöhe. Je nach Setup findest du die Einstellungen unter Design → Customizer → Layout → Primary Navigation. In neueren blockbasierten Navigationslösungen werden Abstände direkt an den entsprechenden Navigation- und Menü-Blöcken eingestellt.

Wichtig ist: Nicht einfach die gesamte Navigation höher machen, nur um einen einzelnen Menüpunkt zu korrigieren. Vergleiche zuerst die berechneten Werte der betroffenen Elemente.

Eigene CSS-Regeln sind oft die eigentliche Ursache

GeneratePress selbst richtet Menüpunkte normalerweise konsistent aus. Sehr häufig entsteht die Abweichung erst durch eigenes CSS. Typische Beispiele:

.main-navigation .main-nav ul li {
    padding: 10px;
    min-width: 180px;
}

.main-navigation a {
    line-height: 1.4;
}

Das Problem: Der Dropdown-Toggle kann eigene Padding-Regeln besitzen. Dann bekommt der Menüpunkt mit Untermenü effektiv andere Innenabstände als der normale Menüpunkt.

GeneratePress-Supportbeispiele zeigen genau solche Fälle: Wird der Dropdown-Toggle ausgeblendet oder werden eigene Abstände gesetzt, müssen die Abstände des Links oft separat nachjustiert werden.

Rechten und linken Abstand des Dropdown-Toggles kontrollieren

Wenn der Menütext zwar auf gleicher Höhe sitzt, aber optisch verschoben wirkt, kann auch der horizontale Abstand täuschen. GeneratePress verwendet für Menüpunkte mit Untermenü zusätzliche Toggle-Flächen. Ein Beispiel für eine gezielte Korrektur:

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
}

Der konkrete Wert hängt vom Design ab. Wichtig ist, dass du nicht pauschal alle Links veränderst, wenn nur Menüpunkte mit Untermenü betroffen sind.

Schriftart und SVG können die Grundlinie beeinflussen

Der ursprüngliche Chat vermutete zu Recht, dass bestimmte Schriftarten die Abweichung sichtbarer machen können. Schriftarten besitzen unterschiedliche Ober- und Unterlängen sowie Baseline-Metriken. Ein inline dargestelltes SVG kann sich deshalb optisch anders ausrichten als der Text.

Wenn das Problem erst nach einem Font-Wechsel aufgetreten ist, teste kurz mit einer Standardschrift. Ist die Abweichung dann verschwunden, liegt es sehr wahrscheinlich an der Kombination aus Font-Metrik und Toggle-Ausrichtung.

Mobile Navigation separat betrachten

Desktop- und Mobilnavigation sind in GeneratePress nicht immer identisch aufgebaut. Ein CSS-Fix, der auf Desktop perfekt aussieht, kann in der mobilen Navigation zusätzliche Abstände verursachen.

Wenn die Korrektur nur für Desktop gedacht ist, begrenze sie:

@media (min-width: 769px) {
    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
}

Bei abweichenden Breakpoints solltest du natürlich den Wert verwenden, den dein konkretes Layout nutzt.

Wenn zusätzlich Leerraum unter dem Untermenü entsteht

In einem verwandten Gemini-Verlauf trat nach dem Wechsel eines Menütyps auf ein Flyout-Menü ein langer leerer Bereich unter dem Untermenü auf. Das ist ein anderes Fehlerbild, kann aber dieselbe Navigation betreffen.

Dann solltest du nicht nur den Toggle prüfen, sondern den gesamten Untermenü-Container:

  • Ist eine feste height gesetzt?
  • Gibt es eine unerwartete min-height?
  • Ist großes padding-bottom aktiv?
  • Hat ein Menü- oder Mega-Menü-Plugin noch alte Layoutdaten im Cache?
  • Wird die Höhe per JavaScript berechnet?

In den Entwicklertools lässt sich der Verursacher schnell finden: Fahre im DOM über die Elemente des Untermenüs. Der Browser hebt den tatsächlich beanspruchten Bereich farbig hervor.

Cache nach CSS-Änderungen leeren

Gerade bei Navigationen greifen oft mehrere Cache-Ebenen ineinander:

  • Browser-Cache
  • WordPress-Caching-Plugin
  • CSS-Minifizierung
  • Server- oder CDN-Cache

Wenn du CSS geändert hast und scheinbar nichts passiert, teste zuerst ein privates Browserfenster oder einen Hard Reload. Sonst suchst du möglicherweise an einem Problem, das bereits behoben ist.

Eine sinnvolle Reihenfolge für die Fehlersuche

  1. Betroffenen Menüpunkt und normalen Menüpunkt in den Entwicklertools vergleichen.
  2. Prüfen, ob nur der Dropdown-Pfeil tiefer sitzt oder der gesamte Link.
  3. Eigene CSS-Regeln für .main-navigation, .menu-item-has-children und .dropdown-menu-toggle kontrollieren.
  4. Toggle mit inline-flex und align-items:center ausrichten.
  5. Padding und Line-Height angleichen.
  6. Desktop und Mobil getrennt testen.
  7. Cache leeren und erneut prüfen.

Fazit

Wenn in GeneratePress ein Menüpunkt mit Untermenü etwas tiefer sitzt, ist das meistens kein grundsätzlicher Theme-Fehler. Der zusätzliche Dropdown-Toggle verändert die Box beziehungsweise die Baseline des Menüelements. Mit einer gezielten Kontrolle von line-height, Padding und Toggle-Ausrichtung lässt sich das sauber beheben. Statt den Menüpunkt pauschal um einige Pixel nach oben zu schieben, sollte die Ursache direkt am Dropdown-Element korrigiert werden.