Seit der Veröffentlichung dieses Textes ist viel Zeit vergangen. Jedoch hat sich an dem Bedürfnis, für WordPress den Header zu fixieren, nicht viel geändert. Deshalb erweitere ich nun diesen Beitrag um Anleitungen für die letzten drei Standardthemes Twenty Nineteen / Twenty / Twenty-One. Das Vorgehen ist dabei um einiges komplexer als für das alte Twenty Sixteen.
Damals kam bei einer Kundin die Frage auf, ob sich nicht der WordPress Header fixieren lässt. Hinter ihrer Frage stand der nachvollziehbare Wunsch, dass ihre Leser/innen jederzeit Zugriff auf ihr Menü haben sollten. Bei ihrem Theme aber müssen Leser/innen, wenn sie am Ende eines längeren Textes angekommen sind, den langen Weg zurück zum Seitenanfang scrollen, um navigieren zu können.
Nun stand meine Kundin – wie so viele Nutzer/innen auch heute noch – mit diesem Problem nicht alleine da. Zwar bieten viele Themes den fixierten Header. Und sofern das Menü Bestandteil dieses Headers ist, bleibt so auch die Navigation immer am oberen Fensterrand stehen und ist damit jederzeit erreichbar.
Doch was ist, wenn Ihr Theme dies nicht vorsieht? Nehmen wir zum Beispiel Twenty Sixteen, dessen Header nicht fixiert ist. Lässt sich das ändern? Aber sicher, und das ist noch nicht mal schwer!
Wie immer der Hinweis: Solche Änderungen sollten Sie natürlich nur im Rahmen eines Child Themes oder mittels des zusätzlichen CSS im Customizer vornehmen, sonst sind Ihre Anpassungen nach dem nächsten Theme Update verschwunden.
Twenty Sixteen: WordPress Header fixieren
Der Twenty Sixteen Header kommt von Haus aus eher schlicht daher. Das passt so sicherlich zur gesamten Gestalt, ist in meinen Augen aber nicht das wesentliche Verkaufsargument für dieses Theme. Ein bisschen verloren wirkt er im Raum, der ihn umgibt. Kommt daher wie ein Gast auf einer Party, der sich dort nicht wohlfühlt. Lösen wir also gleich zwei Probleme auf einmal und platzieren den Header neu. Dazu braucht es nur die Bearbeitung einer einzigen Klasse: .site-header-main. Die allerdings müssen wir zweimal angehen, schließlich soll es ja auch auf Tablets und Smartphones gut aussehen.
Die in der style.css des Themes vorhandenen Angaben für die Klasse .site-header-main beziehen sich bislang alle nur auf die Anordnung der Items. Daran werden wir nichts ändern. Wir geben dieser Klasse nur weitere Eigenschaften und ordnen ihnen Werte zu.
Eigenschaften und Werte für die Klasse .site-header-main
position: fixed;
Die erste Ergänzung bezieht sich auf die Postion und ihr Wert lautet fixed. Das ist nicht allzu verwunderlich, schließlich wollen wir den WordPress Header fixieren. Das alleine reicht aber nicht, denn damit würde der Header immer noch mitten im Raum stehen, nun allerdings zur Salzsäule erstarrt. Wir aber wollen ihn ja an den oberen Fensterrand bringen. Dafür braucht es zwei weitere Eigenschaften.
top: 0; left: 0;
Die Werte (jeweils 0) für die Eigenschaften top und left besagen, dass das so definierte Element am obersten linken Punkt im Browserfenster starten soll. Werte wie 10px und 20px würden dafür sorgen, dass das Ganze 10 Pixel von oben und 20 Pixel von links positioniert wäre. Aber das wollen wir nicht. Wir wollen die Doppelnull.
width: 100%;
Nun braucht das Ganze aber auch noch eine Breite. Wenn der Header dort oben links schon fixiert ist, sollte er auch die volle zur Verfügung stehende Fensterbreite ausnutzen. Von daher heißt es width: 100%;. Allerdings versteckt sich der Header noch im Hintergrund; andere Elemente liegen über ihm, verdecken ihn. Also müssen wir ihn in den Vordergrund bringen.
z-index: 999;
Der z-index bestimmt, in welcher Reihenfolge Elemente, deren Position definiert ist, übereinander gestapelt sein sollen. Dabei gilt: Je höher der Wert, desto weiter oben liegen sie auf dem Stapel. Der Wert 999 ist wahrscheinlich etwas übertrieben, funktioniert aber. Der Header liegt nun im Vordergrund, seine Inhalte kleben allerdings noch arg an seinen Begrenzungen. Es braucht also ein wenig Innenabstand.
padding: 10px 100px 0;
Die drei gewählten Werte entsprechen den des oberen Innenabstandes (10px), der inneren Abstände links und rechts (100px) und des unteren inneren Abstandes, den wir so nicht brauchen (0). Der Abstand für links und rechts kann natürlich auch geringer sein, zum Beispiel nur 20px. Ich finde es so aber ganz ansprechend und auch ein bisschen im Sinne des bisherigen Erscheinungsbildes.
Wenn Sie Ihren neuen Header testen und nach unten scrollen, werden Sie feststellen, dass er leider keine Hintergrundfarbe hat. Deshalb ist er auch kaum lesbar. Außerdem könnte er einen kleinen Rahmen nach unten vertragen, sagen wir: mit einem kleinen Schatten.
background-color: #fcfcfc; box-shadow: 0 2px 5px #000;
Ich habe eine Hintergrundfarbe gewählt, die nicht ganz weiß ist (#fcfcfc), und eine nach unten fallenden (0) dezenten Schatten (5px) einer noch dezenteren (2px) schwarzen (#000) Rahmenlinie.
Anpassung für mobile Geräte
Schließlich braucht es noch eine Anpassung für mobile Geräte: Der Innenabstand sollte hier ein wenig anders sein. Die Definition im Rahmen von @media screen and (max-width: 44.375em) überschreibt dabei die bisherige padding-Definition für alle Geräte, die breiter sind als 710 Pixel.
Im ganzen Satz lautet die Definition für das WordPress Header Fixieren im Rahmen des Themes Twenty Sixteen also:
.site-header-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
padding:10px 100px 0;
background-color: #fcfcfc;
box-shadow: 0 2px 5px #000;
}
@media screen and (max-width: 44.375em) {
.site-header-main {
padding:30px 30px 0;}
}und sieht im gescrollten Zustand so aus:
WordPress Header fixieren: Twenty Twenty-One
Im Zuge der Aktualisierungen dieses Beitrags fangen wir am besten mit Twenty Twenty-One an. Warum? Weil es die meisten Anpassungen benötigt. Und weil unter diesen so manche ist, die auch für Twenty Twenty und Twenty Nineteen funktioniert.
Logo und Site-Titel positionieren
Zuerst einmal macht es bei Twenty Twenty-One einen Unterschied, ob Sie mit oder ohne Website Logo arbeiten. Mit Logo gibt das Theme dies zentriert oberhalb der Zeile mit dem Site-Titel, der Site-Beschreibung und dem Menü aus. Mein Ziel ist es aber, das Logo zusammen mit dem Site-Titel, aber ohne Site-Beschreibung, links im Header anzuzeigen. Das Menü folgt dann im rechten Bereich der Header-Zeile.
Zu erreichen ist dies, indem Sie dem Logo nur eine bestimmte Breite zur Verfügung stellen. In meinem Fall ist dies max-width: 120px. Nun befindet sich der Titel rechts neben dem Logo. Und sofern das Menü nicht zu umfangreich ist, erscheint es im rechten Bereich. Sonst nimmt es sich eine Zeile darunter.
Eine weitere Anpassung sorgt dafür, dass das Logo keine untere Rahmenlinie (border-bottom: none;) zeigt. Außerdem braucht es keinen Innenabstand nach unten: padding-bottom: 0; Schließlich sorgt ein display:none; für die .site-description dafür, dass die Site-Beschreibung nicht länger angezeigt wird.
.site-header anpassen und fixieren
Für den .site-header braucht es nun zwei Anpassungen. Die erste bezieht sich darauf, wie der Header auf jedem Gerät aussehen soll. Hier geht es vor allem darum, dass er die volle Breite (min-width: 100%;) minus etwas padding nutzt. Und die zweite Anpassung liefert Definitionen für die Darstellung auf allen Geräten mit einer Breite von mindestens 822 px. Alle Angaben, die hier für den .site-header zu finden sind, entsprechen weitestgehend denen, die auch für Twenty Sixteen funktionieren.
Der Grund für den Unterschied liegt vor allem daran, dass es nicht so viel Sinn macht, für kleinere Geräte den WordPress Header zu fixieren. Je nachdem wie hoch der dann ist, nimmt er ein Drittel bis die Hälfte des Displays ein. Lesen macht so keinen Spaß mehr.
Die nächste wichtige Anpassung bezieht sich dann auf den Content. Ist der Header fixiert, muss der Content einen Vorabstand bekommen. Sonst überdeckt der Header auch ohne Scrollen bereits den oberen Content. Das wäre blöd. .site-main > *:first-child adressiert das Problem. margin-top: 200px löst es.
Schließlich gibt es noch die Möglichkeit, Darstellung für angemeldete Benutzer/innen anzupassen. Mit etwas margin-top bleibt der Abstand nach oben bewahrt. Ohne diese Definition deckt die Admin-Bar sonst etwas vom Header ab.
Anpassungen für den Dark Modus
Nun bietet Twenty Twenty-One ja auch noch den Dark Modus. Der lässt sich abschalten. Wenn Sie ihn aber nutzen, dann braucht es auch hierfür Anpassungen. Die beziehen sich vor allem auf die Hintergrundfarbe. Über .is-dark-theme lässt sich der Zustand des aktivierten Dark Modus ansprechen. background-color: #39414d; sorgt für den etwas helleren Grauton.
Für die weiße Schriftfarbe sorgt das Theme selbst. Nicht aber kann das Theme aus dem schwarzen ein weißes Logo machen. Das geht aber mittels des CSS Filters invert (invertieren).
Alle weiteren Anpassungen, die ich im Folgenden nenne, könnte man noch als Finetuning bezeichnen. Einige beziehen sich auf Geräte größer als Smartphones, andere gelten der Darstellung eben auf Telefonen. Ein bisschen padding hier, etwas margin da – und auf Telefonen ein etwas kleineres Logo. Aber das war es dann auch endlich.
CSS für Twenty Twenty-One
/* Logo links, Site-Title rechts daneben in derselben Zeile */
.site-header > .site-logo, .site-header > .site-branding > .site-logo {
max-width: 120px;
}
/* Logo: kein Rahmen, kein Abstand nach unten */
.site-header > .site-logo {
padding-bottom: 0;
border-bottom: none;
}
/* Ausblenden der Site-Beschreibung */
.site-description {
display:none;
}
/* Header: volle Breite, Innenabstände */
.site-header {
min-width: 100%;
padding-top: 10px;
padding-bottom: 10px;}
/* Fixieren des Headers für größere Geräte */
@media only screen and (min-width: 822px) {
.site-header {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
z-index: 999;
padding:10px 20px 0;
background-color: #fff;
box-shadow: 0 0 2px #000;
}
/* Vorabstand für die Admin-Bar */
.admin-bar .site-header {
top: 32px;
}
/* Vorabstand für den Content */
.site-main > *:first-child {
margin-top: 200px;
}
}
/* Header Hintergrundfarbe für den Darkmodus */
.is-dark-theme .site-header {
background-color: #39414d;
}
/* Logo invertiert im Darkmodus */
.is-dark-theme .site-logo .custom-logo {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
}
/* Anpassungen für Geräte größer als ein Telefon */
@media only screen and (min-width: 482px) {
/* Abstand Navigation */
.primary-navigation {
padding: 0 20px;
}
/* Abstand Logo */
.site-logo .custom-logo {
padding-left:20px;
}
}
/* Anpassungen für Smartphones */
@media only screen and (max-width: 481px) {
.site-header > .site-logo, .site-header > .site-branding > .site-logo {
max-width: 100px;
}
/* Abstand vor und rechts für Site Title */
.site-header.has-logo.has-title-and-tagline.has-menu .site-branding {
padding-top: 20px;
padding-right:50px;
}
/* Abstand vor für den Burger */
body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation {
margin: 0 25px;
}
}WordPress Header fixieren: Twenty Twenty
Wenn Sie den Header für Twenty Twenty fixieren möchten, ist etwas weniger Anpassung nötig. Vor allem auf Mobilgeräten sieht das Ganze auch ohne weiteres Zutun schon ziemlich gut aus. Es braucht also kein weiteres Finetuning à la padding hier und margin da.
Logo oder Site-Titel
Bei Twenty Twenty müssen Sie sich entscheiden: Wollen Sie Ihr Logo oder Ihren Site-Titel zeigen? Ich habe mich für das Logo entschieden. Die Site-Beschreibung blende ich auch hier aus.
Überhaupt funktioniert für Twenty Twenty sehr vieles von dem, was ich oben für Twenty Twenty-One (und ganz oben für Twenty Sixteen) gezeigt habe. Einer der wenigen großen Unterschiede: Den site-header adressieren Sie bei diesem Theme nicht als Klasse, sondern als ID. Aus diesem Grund heißt es auch #site-header und nicht .site-header.
Ein weiterer Unterschied zu Twenty Twenty-One: Wenn Sie wie ich dem Header einen dunklen Hintergrund geben, sind Sie für die helle Schrift selbst verantwortlich. Und wenn wir uns die dafür nötige Adressierung (body:not(.overlay-header) .primary-menu > li > a etc.) etwas genauer anschauen, fällt noch ein Unterschied auf.
Cover versus Standard Template
Twenty Twenty bietet das sogenannte Cover Template für Beiträge und Seiten. Dies sorgt dafür, dass das Beitragsbild groß im Header mit einem Overlay erscheint. Hierfür braucht es also auch eine Definition.
Ferner braucht es noch eine Definition für angemeldete Nutzer/innen. Den Vorabstand zur Admin Bar bietet das Theme nämlich nur für den großen Overlay Header, nicht aber für Seiten und Beiträge, die darauf verzichten. Auch in Hinblick auf den Abstand zum Content braucht es für die beiden Varianten unterschiedliche Vorgehen. Ohne das große Bild bieten 150px angenehmen Weißraum. Mit Bild reichen 100px.
Beim Logo wenden wir hier wieder den Filter-Trick an und machen so aus einem schwarzen Bild ein weißes.
CSS für Twenty Twenty
/* Vorabstand für angemeldete Nutzer/innen Standard-Template */
.admin-bar #site-header {
top: 32px;
}
/* Ausblenden der Site-Beschreibung */
.site-description {
display:none;
}
/* Header: Farbe, volle Breite, Innenabstände */
#site-header, .overlay-header #site-header {
background-color:#000;
padding-top: 10px;
padding-bottom: 10px;}
.header-inner {padding:10px;}
/* Logo invertiert */
.site-logo .custom-logo {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
}
/* Schriftfarbe weiß für Menü und Suche */
body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .header-inner .toggle svg, body:not(.overlay-header) .toggle-inner .toggle-text {
color: #fff;
}
/* Fixieren des Headers für Desktop */
@media only screen and (min-width: 822px) {
#site-header, .overlay-header #site-header {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
z-index: 999;
padding:0 20px 0;
background-color: #000;
box-shadow: 0 0 2px #000;
}
/* Vorabstand für den Content */
#site-content {
margin-top: 150px;
}
.overlay-header #site-content {
margin-top: 100px;
}
}WordPress Header fixieren: Twenty Nineteen
Auch Twenty Nineteen arbeitet mit dem Beitragsbild inklusive Overlay im Header. Hier allerdings lässt sich das nicht mittels Template zuordnen. Das große Beitragsbild im Header ist der Standard. Es sei denn, Sie greifen wie ich massiv ein und ändern das Template.
Wenn Sie Twenty Nineteen aber nutzen wollen, wie es nun mal ist, müssen Ihre Anpassungen dem Rechnung tragen. In meinem Beispiel gehört dazu, dass ich den Header nur für Seiten ohne Beitragsbild fixiere, ihn für Beiträge mit diesem Bild hingegen nicht. Wollte man Logo, Site-Titel und Menü getrennt vom Beitragsbild fixieren, müsste man dies über den .site-branding-container tun. Greift man hingegen auf die Klasse .site-header.featured-image zu und gibt auch dieser die Eigenschaften und Werte wie für die Klasse .site-header, wird gleich das ganze Konstrukt fixiert. Ein Scrollen zum Content wäre nicht mehr möglich.
Auch gehört in meinem Fall dazu, dass ich bei fixiertem Header mit einem recht hellen Blau als Hintergrund schwarze Schrift und ein schwarzes Logo verwende. Auf dem Coverbild mit seinem Overlay hingegen sollen Schrift und Logo weiß sein.
CSS für Twenty Nineteen
/* Ausblenden der Site-Beschreibung */
.site-description {
display:none;
}
/* Header: Farbe, volle Breite, Innenabstände */
.site-header {
background-color: #7de0ff;
min-height: 150px;
}
/* Logo und Menüpfeile invertiert für Darstellung auf Featured Image Header */
.site-header.featured-image .site-logo .custom-logo, .site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
}
/* Logo auf Featured Image Header */
.site-header.featured-image .custom-logo-link {
background: none;}
/* Schriftfarbe schwarz für Menü und Suche */
.main-navigation ul.main-menu > li > a, .site-title a, .site-title a:link, .site-title a:visited, .main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg {
color: #000;
}
/* Fixieren des Headers für Desktop */
@media only screen and (min-width: 822px) {
.site-header {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
z-index: 999;
padding:50px 50px 0;
background-color: #7de0ff;
box-shadow: 0 0 2px #000;
}
/* Vorabstand für den Content */
.site-content {
margin-top: 200px;
}
.site-header.featured-image {
margin-bottom:-100px;
}
}
Und was war damals mit der Kundin?
Meiner Kundin konnte ich mit diesem Vorgehen leider nicht helfen. Zwar lässt es sich so oder ähnlich – wie nun gezeigt – auch auf andere Themes übertragen. Ihres jedoch hat eine etwas anders gelagerte Grundstruktur. Sicherlich kann man auch die umschreiben, doch dann hätten wir recht massiv Eingriff nehmen und damit das an sich sehr schöne Design stark verändern müssen. Deshalb habe ich ihr damals zu einem komplett anderen Ansatz geraten, damit ihre Leser schnelleren Zugriff auf das Menü erlangen. Welcher das ist?
Nun, das war mit damals einen weiteren Beitrag wert, und den gab es in der Folgewoche.
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar