GeneratePress: Menü links bündig mit dem Seiteninhalt ausrichten

Wenn das Hauptmenü in GeneratePress links etwas weiter außen oder innen beginnt als der eigentliche Seiteninhalt, wirkt das gesamte Layout unruhig. Besonders deutlich fällt es auf, wenn Überschriften, Textspalten und Navigation eigentlich dieselbe optische Achse bilden sollen. Im ursprünglichen Verlauf war genau das Ziel: Das Menü oben soll links exakt dort beginnen, wo der Text darunter beginnt.

Die gute Nachricht: GeneratePress besitzt dafür bereits eigene Layout-Einstellungen. Bevor du CSS mit festen Pixelwerten ergänzst, solltest du daher prüfen, ob Containerbreite, Navigation Width und Inner Navigation Width zueinander passen.

1. Drei Breiten unterscheiden

GeneratePress trennt mehrere Ebenen:

  • Website-/Content-Container: maximale Breite des normalen Seiteninhalts.
  • Navigation Width: äußere Breite des Navigationsbereichs – also auch Hintergrundfarbe oder Hintergrundbild.
  • Inner Navigation Width: Breite des inneren Containers, in dem die eigentlichen Menüeinträge liegen.

Genau diese Unterscheidung beschreibt GeneratePress in seiner offiziellen Dokumentation.

2. Typischer gewünschter Aufbau

Viele moderne Websites nutzen:

  • Navigation-Hintergrund über die komplette Browserbreite,
  • Menüeinträge aber innerhalb derselben maximalen Breite wie der Seiteninhalt.

Dann sollte die äußere Navigation auf Full stehen und die innere Navigation auf Contained.

3. Einstellungen in GeneratePress prüfen

Im klassischen GeneratePress-Customizer führt der Weg über:

Design → Customizer → Layout → Primary Navigation

Dort sind – je nach Version und Konfiguration – insbesondere relevant:

  • Navigation Width
  • Inner Navigation Width
  • Navigation Alignment

Für eine linksbündige Ausrichtung des Menüs innerhalb des Inhaltsbereichs sollte die Navigation Alignment auf Left stehen.

4. Content-Containerbreite vergleichen

GeneratePress verwendet die zentrale Containerbreite als Bezug für „Contained“. Prüfe deshalb zusätzlich:

Customizer → Layout → Container

Wenn der normale Seiteninhalt beispielsweise auf 1200 Pixel begrenzt ist, sollte eine contained Inner Navigation Width dieselbe Grundbreite übernehmen.

5. Warum „contained“ allein trotzdem nicht exakt aussehen kann

Die maximale Breite kann identisch sein, aber der sichtbare Text beginnt zusätzlich nach einem horizontalen Padding. Beispiel:

  • Content-Container: max. 1200 px
  • Text innen: 30 px Padding links/rechts
  • Navigation inner: max. 1200 px, aber kein identisches Padding

Dann liegen die beiden äußeren Container zwar auf derselben Breite, die Menüschrift beginnt aber 30 Pixel weiter links als der Text.

6. Padding ist oft der entscheidende Unterschied

Prüfe im Browser-Inspektor jeweils die linke Kante von:

  • dem ersten Menülink,
  • der ersten Überschrift beziehungsweise Textzeile.

Wenn die Containerkante identisch ist, aber die Texte nicht, liegt es fast immer am Innenabstand.

7. Nicht blind padding-left: 0 setzen

Im ursprünglichen Chat wurde als mögliche Schnelllösung padding-left: 0 genannt. Das kann genau falsch herum wirken. Wenn der Inhaltsbereich 30 Pixel Innenabstand besitzt, braucht die Navigation denselben Innenabstand, nicht zwingend null.

Das Ziel lautet nicht „so weit links wie möglich“, sondern dieselbe optische Achse wie der Inhalt.

8. Browser-Inspektor: die schnellste Messmethode

Öffne die Seite im Frontend und nutze Rechtsklick → Untersuchen. Markiere zuerst den inneren Navigationscontainer und danach den Inhaltscontainer.

Achte auf:

  • max-width
  • margin-left/right
  • padding-left/right
  • tatsächliche berechnete Breite

Der Browser zeigt Padding und Margin farbig an. Damit wird der Unterschied meist sofort sichtbar.

9. Typische GeneratePress-Klassen

Je nach Version und Aufbau tauchen häufig Klassen wie diese auf:

.main-navigation
.inside-navigation
.grid-container
.site-content

Verlasse dich aber nicht blind auf einen Selektor aus einer alten Anleitung. Prüfe im aktuellen HTML deiner Seite, welche Klassen tatsächlich vorhanden sind.

10. CSS nur wenn Theme-Einstellungen nicht ausreichen

Wenn die GeneratePress-Einstellungen korrekt sind, aber dein individuelles Layout eigene Gutter verwendet, kann eine kleine CSS-Ergänzung sinnvoll sein.

Beispiel:

:root {
    --site-max-width: 1200px;
    --site-gutter: 30px;
}

.main-navigation .inside-navigation {
    max-width: var(--site-max-width);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
}

Die Werte 1200 und 30 Pixel sind nur Beispiele. Sie müssen exakt zu deinem realen Layout passen.

11. Warum CSS-Variablen besser als verstreute Zahlen sind

Wenn mehrere Layoutbereiche dieselbe Breite und denselben seitlichen Abstand verwenden, kannst du zentrale Custom Properties definieren:

:root {
    --content-width: 1200px;
    --content-padding: 24px;
}

Dann werden Header, Navigation und Sonderbereiche aus derselben Quelle gespeist. Ändert sich später die Websitebreite, musst du nicht an fünf Stellen suchen.

12. Aber Theme-Einstellungen bleiben vorzuziehen

Wenn GeneratePress bereits dieselbe Containerbreite für Content und Navigation bereitstellt, solltest du nicht unnötig einen zweiten parallelen CSS-Wert einführen. Sonst kann der Customizer später 1300 Pixel anzeigen, während dein CSS weiterhin 1200 erzwingt.

Die beste Reihenfolge lautet:

  1. Theme-Einstellungen angleichen.
  2. Padding/Gutter prüfen.
  3. erst bei Sonderfällen eigenes CSS.

13. Navigation Width Full, Inner Width Contained

Diese Kombination ist besonders nützlich:

  • Der Hintergrund des Menüs reicht von Browserkante zu Browserkante.
  • Die Links beginnen innerhalb der normalen Websitebreite.

Damit wirkt das Layout modern, ohne dass der erste Menüpunkt am äußersten linken Bildschirmrand klebt.

14. Navigation Width Contained

Wenn auch der Hintergrund der Navigation nur so breit wie der Content sein soll, kannst du die äußere Navigation ebenfalls auf Contained stellen. Dann endet beispielsweise eine farbige Menüleiste bereits an der Containerkante.

Das ist eine Designentscheidung und unabhängig davon, ob die eigentlichen Links korrekt ausgerichtet sind.

15. Navigation als Header ist ein Sonderfall

GeneratePress kann die Navigation als Header verwenden beziehungsweise Branding und Navigation in einer gemeinsamen Zeile kombinieren. Dann spielen zusätzlich Logo-/Branding-Breite und Flex-Verteilung hinein.

Wenn das Menü neben einem Logo sitzt, kann „linksbündig zum Text“ etwas anderes bedeuten: Soll die gesamte Header-Innenkante ausgerichtet sein oder der erste Menüpunkt?

Bei einem Logo links ist es normal, dass der erste Menülink weiter rechts beginnt.

16. Float-/Inline-Navigation mit Logo

Wenn das Menü rechts neben dem Logo schwebt, solltest du nicht versuchen, den ersten Menüpunkt per negativem Margin zurück auf die Textkante zu ziehen. Das zerstört die logische Headerstruktur.

Dann ist die richtige Achse meist die linke Kante des Logos beziehungsweise des gesamten Header-Innencontainers.

17. GenerateBlocks-Inhaltscontainer als zusätzliche Ebene

Bei vielen modernen Seiten liegt der eigentliche Text nicht direkt im Theme-Container, sondern in einem GenerateBlocks-Container mit eigener Max-Width und eigenem Padding.

Dann kann GeneratePress vollkommen korrekt eingestellt sein, während der GenerateBlocks-Text 20 oder 30 Pixel weiter innen beginnt.

Prüfe deshalb immer die tatsächlich sichtbare Textkante, nicht nur Theme-Einstellungen.

18. Beispiel: Theme 1200 px, GenerateBlocks 1140 px

Angenommen:

  • GeneratePress Container: 1200 px
  • Inner Navigation: 1200 px
  • GenerateBlocks Content: 1140 px

Dann sind Menü und Text zwangsläufig nicht bündig. Entweder passt du den GenerateBlocks-Container an oder die Navigation muss bewusst dieselbe kleinere Breite erhalten.

19. Responsive seitliche Abstände

Auf großen Bildschirmen können 30 Pixel Gutter gut aussehen, auf dem Smartphone vielleicht 18 oder 20 Pixel. Beispiel:

:root {
    --site-gutter: 30px;
}

@media (max-width: 767px) {
    :root {
        --site-gutter: 18px;
    }
}

Wenn dieselbe Variable in Navigation und Content verwendet wird, bleiben beide Achsen auch mobil bündig.

20. Mobile Navigation separat prüfen

GeneratePress kann auf Mobilgeräten einen Mobile Header beziehungsweise eine eigene Navigation verwenden. Ein CSS-Selektor für die Desktop-.inside-navigation muss deshalb nicht automatisch dieselbe Struktur mobil treffen.

Prüfe die mobile HTML-Struktur separat und überschreibe nur dort, wo wirklich nötig.

21. Scrollbar und 100vw vermeiden

Für innere Navigationscontainer ist width: 100vw selten sinnvoll. 100vw kann die vertikale Scrollbar mit einrechnen und dadurch minimale horizontale Überläufe verursachen.

Normalerweise reicht width: 100% innerhalb des äußeren Navigationsbereichs.

22. Negative Margins nur als letzter Sonderfall

Eine Ausrichtung mit:

margin-left: -17px;

kann auf einem einzelnen Desktop perfekt aussehen und auf Tablet sofort falsch sein. Wenn die Abweichung durch unterschiedliche Container oder Padding entsteht, sollte die Ursache korrigiert werden statt sie mit einem negativen Offset zu verstecken.

23. Submenüs nicht mit der Hauptachse verwechseln

Die Ausrichtung des ersten Hauptmenüpunkts betrifft die Top-Level-Navigation. Untermenüs besitzen eigene Breiten und Paddings. Wenn nur das Dropdown optisch verschoben ist, sollte nicht der gesamte inner navigation container verändert werden.

24. Nach Änderungen Cache leeren

Wenn GeneratePress, ein CSS-Snippet oder ein Performance-Plugin CSS zusammenfasst, kann eine alte Regel zwischengespeichert bleiben. Nach Layoutänderungen deshalb:

  • WordPress-/Performance-Cache leeren,
  • gegebenenfalls CDN-Cache,
  • Seite in einem privaten Browserfenster prüfen.

25. Meine empfohlene Diagnose-Reihenfolge

  1. GeneratePress Container Width notieren.
  2. Primary Navigation → Navigation Width prüfen.
  3. Inner Navigation Width auf Contained testen.
  4. Navigation Alignment auf Left setzen.
  5. sichtbare Textkante im Frontend messen.
  6. Content-Padding und Navigation-Padding vergleichen.
  7. GenerateBlocks-Max-Width prüfen.
  8. erst danach gezieltes CSS ergänzen.

26. Ein robustes CSS-Beispiel für individuelle Layouts

.main-navigation .inside-navigation {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 30px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .main-navigation .inside-navigation {
        padding-inline: 18px;
    }
}

Diese Regel ist nur dann richtig, wenn 1200/30/18 tatsächlich deiner Content-Geometrie entsprechen.

Fazit

Um das GeneratePress-Menü exakt links mit dem Seiteninhalt auszurichten, solltest du zuerst die eingebauten Navigationseinstellungen verwenden. Entscheidend sind die zentrale Containerbreite, die Inner Navigation Width und der tatsächliche horizontale Innenabstand. Häufig ist nicht die maximale Breite falsch, sondern das Padding unterscheidet sich. Eigenes CSS sollte erst dann ergänzen, wenn Theme- und GenerateBlocks-Container bewusst individuell aufgebaut sind.

Aktuell geprüft

GeneratePress dokumentiert weiterhin getrennte Einstellungen für Navigation Width, Inner Navigation Width und Navigation Alignment. Eine contained innere Navigation orientiert sich an der zentralen GeneratePress-Containerbreite.