Startseite » Ein fixierter Header und die WordPress Admin Bar

Photo from Unsplash - Sai Kiran Anagani

Ein fixierter Header und die WordPress Admin Bar

Wer ein Theme mit einem fixierten Header gestalten möchte, wird recht schnell über diesen kleinen “Fehler” stolpern: Die Admin-Bar von WordPress legt sich über den fixierten Header und verdeckt diesen teilweise oder auch ganz, je nach Größe.

Mit diesem kleinen Snippet umgeht man dies und der Header wird wieder ordentlich unter der Admin-Bar angezeigt:

// WordPress admin bar fix
body.admin-bar #page {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #page {
		top: 46px;
	}
}

Wobei #page in diesem Beispiel für das erste HTML-Element steht, welches nach <body> folgt. Dies ist z. B. in den Standard-Themes von WordPress der Fall, da dieses <div> dort als Wrapper für die Seite dient. Sollte es keinen Wrapper im Theme geben, kann auch das erste HTML-Element genommen werden, was üblicherweise der Header ist.

Der Media Query ist auch wichtig, da WordPress ab dieser Größe die mobile Admin-Bar einsetzt, die etwas höher ist als die Desktop-Variante.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.