Wie lässt sich der WordPress Header fixieren?

Zuletzt 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 jederzeit Zugriff auf ihr Menü haben sollen. Bei ihrem Theme aber müssen Leser, wenn sie am Ende eines längeren Textes angekommen sind, den langen Weg zurück zum Seitenanfang scrollen, um navigieren zu können. Da sie mit diesem Problem nicht alleine dasteht, nutzen immer mehr Theme Autoren den fixierten Header. 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 benutzerdefiniertem CSS vornehmen, sonst sind Ihre Anpassungen nach dem nächsten Theme Update verschwunden.

Den Twenty Sixteen Header fixieren

Der Twenty Sixteen Header kommt von Haus aus eher schlicht daher. Das passt so sicherlich zur gesamten Gestalt, ist ein meinen Augen aber nicht das 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.

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: 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 Postion 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 im 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 einen, nur 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 am Beispiel Twenty Sixteen
Twenty Sixteen mit fixiertem Header

 

Und was ist mit der Kundin?

Meiner Kundin konnte ich mit diesem Vorgehen leider nicht helfen. Zwar lässt es sich so oder ähnlich auch auf andere Themes übertragen. Ihres jedoch hat eine etwas anders gelagerte Grundstruktur. Sicherlich kann man auch die umschreiben, doch dann müssten wir recht massiv Eingriff nehmen und würden das an sich sehr schöne Design stark verändern. Ich habe ihr deshalb zu einem komplett anderen Ansatz geraten, damit ihre Leser schnelleren Zugriff auf das Menü erlangen. Welcher das ist? Nun, das ist einen weiteren Beitrag wert, und den gibt es nächste Woche.

 


Beitragsbild: Britta Kretschmer

 

1 Anmerkung zu “Wie lässt sich der WordPress Header fixieren?

  • 5. Juli 2018 um 21:41
    Permalink

    sehr schöne Anleitung. Kann man diese auch auf das Theme OceanWP übertragen? Ich möchte auf meiner WordPress Seite mit Ocean WP Theme ebenfalls den Header fixieren. Leider gibt es beim Theme standardmäßig keine Funktion dies zu aktivieren.

Schreibe einen Kommentar

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