Sticky Header ohne Plugin erstellen in WordPress
Inhaltsverzeichnis
    Add a header to begin generating the table of contents

    Grundlagen

    Für diese Anleitung benötigst du:

    • Kenntnisse in HTML5 und CSS3
    • Elementor (Free/Pro)

    Heute beschäftigen wir uns mit der Gestaltung deines Headers. In dem Beitrag „Was ist ein Sticky Header“ hast du schon gelernt welche Vor und Nachteile ein Sticky Header hat. Jetzt setzen wir den Sticky Header auf deiner Website um.

    Schritt 1 Header ID herausfinden

    Um den Header per CSS zu fixiern müssen wir herausfinden, wie unsere Header ID heißt. Am einfachsten geht das über eine Funktion deines Browser (in diesem Beispiel benutze ich den Google Chrome Browser). 

    1. Website öffnen.
    2. Rechtsklick auf den Headerbereich 
    3. Im Kontextmenü den Punkt „Untersuchen“ auswählen

    Auf der rechten Seite hat sich nun ein neues Fenster geöffnet. Dieses Fenster zeigt dir den HTML Code deiner Seite an. Du siehst schon die blau hinterlegte Stelle im Code. Dies ist dein Header Element. Wenn du mit deiner Maus über diese Codezeile fährst, siehst du wie der Header auf deiner Seite hervorgehoben wird.

    Jetzt musst du nur noch die ID aus dem markiertem Code heraussuchen (du kannst natürlich auch über die class gehen, falls du keine ID hast. In diesem Beispiel heißt unsere ID „Header_Sticky“. 

    Tipp: Du kannst mit dem Visual Builder „Elementor“ jedem Element deiner Website eine ID geben. Durch die Vergabe von Sinnigen IDs wird der Code für dich leichter zu lesen.

    Schritt 2 CSS anpassen

    Jetzt sind wir bereit um die Datei style.css anzupassen (am besten davor eine Sicherung der Datei durchführen). Die Datei style.css finden wir, wenn wir uns im Dashboard unserer Website befinden. Unter dem Menüpunkt Design –> Theme-Editor.

    Auf der rechten Seite können wir die Datei style.css auswählen. Im Normalfall sollte dann eine leere Seite erscheinen.

    Auf dieser Seite müssen wir nun unseren CSS Code für den Sticky Header einfügen.

    #Header_Sticky
    { position: fixed ; width: 100% ; z-index: 9999 ;
    box-shadow:0px 10px 20px black; }

    Wir sehen als erstes die ID des Headers (angeführt mit einem #). In den Klammern sehen wir den eigentlichen Code.

    • Mit position: fixed; fixieren wir den Header.
    • width: 100%; bedeutet, dass der fixierte Header 100% der Breite einnimmt.
    • z-index: 9999; sorgt dafür , dass der Header auch im Vordergrund steht (deshalb die hohe Zahl).
    • box-shadow habe ich zusätzlich eingefügt um den Header vom Hintergrund hervorzuheben.

    So sollte deine style.css Datei nun aussehen. Jetzt muss nur noch die Datei über den Button „Datei aktualisiern“ gespeichert werden. Zum Abschluss kommt jetzt noch ein ganz wichtiger Punkt.

    Der Cache des Browser muss jetzt unbedingt geleert werden.

    Jetzt kann die Website erneut aufgerufen werden und wenn alle Schritte befolgt wurden hat man nun einen Sticky Header.

    Sollte es Probleme oder Schwierigkeiten beim Einrichten geben, kannst du mich gerne anschreiben.