Die ursprüngliche Frage war knapp: Wo stelle ich in GeneratePress den Abstand vom oberen Menü zum oberen Bildschirmrand ein? Genau diese Frage ist in der Praxis etwas tückisch, weil der sichtbare Abstand von mehreren Bereichen kommen kann: Header, Navigation, Top Bar, Sticky-Menü oder zusätzlichem CSS.
Zuerst klären: Wo entsteht der Abstand?
Bevor du Werte änderst, solltest du prüfen, ob der freie Bereich tatsächlich oberhalb des Menüs liegt oder innerhalb des Headers entsteht. Mit den Browser-Entwicklertools kannst du sehen, welches Element Padding oder Margin besitzt.
Typische Kandidaten in GeneratePress sind:
- Site Header
- Primary Navigation
- Top Bar
- Navigation as Header
- Sticky Navigation
- Custom CSS
Header Padding
Wenn das Logo und Menü gemeinsam in einem Header sitzen, beeinflusst das Header-Padding die Höhe des gesamten Bereichs. GeneratePress dokumentiert Header Padding als eigene Spacing-Einstellung.
Je nach Version findest du diese Optionen im Customizer beziehungsweise in den Layout-/Spacing-Einstellungen. Verringere vor allem Padding Top, wenn oberhalb von Logo oder Navigation zu viel Platz entsteht.
Menu Item Height
Wenn du die Navigation als Header verwendest, bestimmt die Höhe der Menüelemente einen großen Teil der Gesamthöhe. GeneratePress beschreibt bei „Navigation as a Header“, dass sich Logo- und Navigationshöhe über die Menu Item Height beeinflussen lassen.
Ein zu hoher Wert macht die gesamte Menüzeile unnötig groß, auch wenn oberhalb technisch gar kein Margin gesetzt ist.
Top Bar prüfen
Wenn über der Navigation ein leerer oder farbiger Streifen erscheint, kontrolliere, ob eine Top Bar aktiv ist. Eine leere Top Bar kann optisch wie ein unerklärlicher oberer Abstand wirken.
Wenn du sie nicht benötigst, deaktiviere sie beziehungsweise entferne leere Widgets oder Inhalte daraus.
Navigation als Header
GeneratePress kann die Navigation direkt als Header verwenden. Dann gelten andere Abstände als bei einem klassischen Aufbau aus Site Header plus separater Navigation.
Prüfe deshalb zuerst, ob Use Navigation as Header aktiv ist. In diesem Modus ist die Menüelementhöhe besonders wichtig.
Sticky Navigation separat prüfen
Eine klebrige Navigation kann andere Höhenwerte besitzen als die normale Navigation. Wenn der Abstand erst nach dem Scrollen auffällt oder sich die Menüzeile beim Scrollen verändert, liegt die Ursache wahrscheinlich im Sticky-Menü.
GeneratePress unterstützt eine eigene Sticky Navigation Height. Diese kann kleiner als die normale Menühöhe eingestellt werden.
Was du nicht tun solltest: body margin als erste Lösung
Im ursprünglichen Gemini-Chat wurde als allgemeiner CSS-Ansatz body { margin-top: 0; } genannt. Das ist zu pauschal. Moderne WordPress-Themes setzen normalerweise keinen störenden Standard-Body-Margin wie eine nackte HTML-Seite.
Wenn der Abstand aus dem Header kommt, behebt eine Body-Regel nicht die eigentliche Ursache und kann unerwartete Nebeneffekte erzeugen.
Mit den Entwicklertools die Ursache finden
Öffne die Seite im Browser und drücke F12. Wähle das Menü beziehungsweise den Header aus. Im Box-Modell siehst du:
- Margin
- Border
- Padding
- tatsächliche Elementhöhe
Damit erkennst du in wenigen Sekunden, ob der freie Raum vom Header-Padding oder von einem anderen Element stammt.
Typischer Aufbau: Header plus Navigation
Wenn die Seite einen separaten Logo-Header und darunter die Navigation besitzt, kann der obere Abstand aus dem .site-header kommen. Dann solltest du dort die vertikalen Innenabstände reduzieren.
Typischer Aufbau: nur Navigation als Header
Wenn Navigation und Logo eine gemeinsame Zeile bilden, ist häufig die Menüelementhöhe der entscheidende Wert. Passe sie schrittweise an, zum Beispiel von 60 auf 50 Pixel, und kontrolliere dabei Logo und mobile Ansicht.
Desktop und Mobil getrennt betrachten
Ein Wert, der auf Desktop gut aussieht, kann auf dem Smartphone zu eng sein. Prüfe deshalb, ob deine GeneratePress-Version responsive Spacing-Werte erlaubt. Falls nicht, kannst du gezielt per Media Query korrigieren.
Beispiel:
@media (max-width: 768px) { .site-header { padding-top: 10px; } }Nur einsetzen, wenn du wirklich weißt, dass der Abstand vom Site Header stammt.
Admin-Bar nicht mit Seitenabstand verwechseln
Wenn du eingeloggt bist, zeigt WordPress oben die Admin-Leiste. Sie verschiebt den sichtbaren Seitenbereich. Teste das Frontend deshalb zusätzlich ausgeloggt oder in einem privaten Fenster.
Cache nach Änderungen
Wenn sich der Abstand trotz geänderter Werte nicht verändert, leere WordPress-, Server- und Browsercache. Besonders bei CSS-Optimierungsplugins können alte Styles noch ausgeliefert werden.
Zusätzliches CSS auf alte Regeln prüfen
Bei älteren Seiten liegen oft individuelle Regeln wie diese vor:
.site-header { padding-top: 30px; } .main-navigation { margin-top: 20px; }Solche Regeln können die Customizer-Einstellungen überschreiben. Suche deshalb im zusätzlichen CSS nach header, navigation, padding und margin.
Was ist der sauberste Weg?
- Prüfen, welches Element den Abstand erzeugt.
- Native GeneratePress-Einstellung verwenden, wenn vorhanden.
- Erst danach gezieltes CSS einsetzen.
- Desktop und Mobil kontrollieren.
- Sticky-Zustand separat testen.
Fazit
Der Abstand über dem GeneratePress-Menü wird nicht an einer einzigen universellen Stelle gesteuert. Meist liegt er am Header Padding, an der Menu Item Height, einer Top Bar oder einer separaten Sticky-Navigation. Statt pauschal den Body zu verschieben, solltest du zuerst das verursachende Element identifizieren und genau dort den Abstand korrigieren.