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.
2 Antworten auf „Ein fixierter Header und die WordPress Admin Bar“
Vielen Dank für dieses Snippet.
Das hat mich schon lange genervt.
Funktioniert wunderbar.
Das Skript wollte bei mir nicht funktionieren. Dann stellte ich fest, dass WordPress die Höhe des Admin-Bars als CSS-Variable mitliefert. Es reicht also, wenn man in seinem Sticky-Header die Zeile top: var(–wp-admin–admin-bar–height); hinzufügt.