Work smart, not hard! Wie Du einen mitscrollenden Header in Elementor erstellst und trotz großem Logo elegant löst, zeige ich Dir in diesem Video.
Wie Du Schritt für Schritt einen Sticky Header erstellst
Ein Sticky Header ist ist gerade bei langen Seiten super praktisch, da er für eine bessere Orientierung und eine deutlich angenehmere Nutzer:innenführung sorgt.
Doch was, wenn Dein Logo viel Platz einnimmt und Dein Header dadurch zu dominant wird?
In diesem Beitrag zeige ich Dir Schritt für Schritt, wie Du in Elementor einen mitscrollenden Header erstellst – und dabei elegant mit einem großen Logo umgehst.
Was ist ein Sticky Header – und warum ist er sinnvoll?
Ein sogenannter Sticky Header bleibt beim Scrollen am oberen Bildschirmrand „kleben“. Das hat gleich mehrere Vorteile:
- Deine Navigation ist jederzeit erreichbar
- Nutzer:innen verlieren nicht die Orientierung
- Deine Website wirkt strukturierter und gleich professioneller
Sticky Header in Elementor erstellen (Grundfunktion)
Die Basis ist schnell umgesetzt:
- Öffne Deinen Header im Elementor Theme Builder
- Wähle den entsprechenden Container aus
- Gehe zu Erweitert > Bewegungseffekte
- Stelle Sticky: Oben ein
- Speichern – fertig
Ab sofort bleibt Dein Header beim Scrollen oben sichtbar.
Das Problem: Große Logos im Sticky Header
Ein großes oder hochformatiges Logo kann dabei aber schnell zum Problem werden: Es nimmt beim Scrollen zu viel Platz ein und macht dadurch den sichtbaren Inhaltsbereich kleiner. Das Ergebnis: Die Nutzer:innenerfahrung leidet.
Aber es gibt auch eine Lösung: Ein dynamischer Header, der sich beim Scrollen verändert.
Die Lösung: Zwei Header-Versionen nutzen
Statt kompliziertem CSS kannst Du Dir in Elementor ganz einfach mit einem Trick behelfen: Du arbeitest mit zwei Headern 😉
Schritt 1: Ersten Header erstellen (großes Logo)
Erstelle den prominenten Header mit Deinem großen Logo, dieser Header dient als „Startansicht“.
Schritt 2: Zweiten Header erstellen (kompakte Version)
Dupliziere dann den ersten Header und tausche das Logo gegen eine kleinere Variante aus (idealerweise hast Du mehrere Versionen Deines Logos (z. B. gestapelt bzw. hoch sowie lang ). Optional: Reduziere Höhe und Abstände in diesem Header, um ihn noch schmaler bzw. kleiner zu machen.
Sticky-Verhalten richtig einstellen
Jetzt kommt der entscheidende Part:
- Oberer Header (großes Logo):
- Sticky deaktivieren
- Unterer Header (kompakt):
- Sticky aktivieren (oben)
Ergebnis: Der große Header scrollt normal aus dem Bild und der kleine Header bleibt oben sichtbar.
Z-Index richtig setzen)
Damit sich die Header korrekt überlagern: Gib dem großen Header einen höheren Z-Index (z.B. 99) und dem kleinen Hader einen niedrigeren (z.B. 98). So steuerst Du, welcher Header „oben liegt“.
Header sauber überblenden (mit negativem Abstand)
Damit der zweite Header nicht sofort sichtbar ist:
- Wähle den unteren (Sticky) Header
- Gehe zu Erweitert > Außenabstand (Margin)
- Setze den oberen Wert ins Negative (z. B. -10%)
👉 Dadurch „versteckt“ sich der kompakte Header zunächst hinter dem großen. Beim Scrollen wird er dann sichtbar.
Feinschliff: Größe und Layout optimieren
Für ein sauberes Ergebnis:
- Reduziere die Containerbreite des Logos im kleinen Header (z. B. von 40% auf 30%)
- Passe die Mindesthöhe des kleinen Headers an
Ergebnis: Das Beste aus beiden Welten
Mit dieser Methode erreichst Du, dass Dein großes, detailliertes Logo wirken kann und darf, während sich beim Scrollen der kleinere, platzsparende Sticky Header offenbart. So sorgst Du für eine insgesamt bessere User Experience und einen professionellen Look
Und das Beste: Deine Besucher:innen merken oft gar nicht, dass zwei Header im Einsatz sind 🤫
Tool-Tipps
*Affiliate-Link. Wenn Du über diesen Link etwas kaufst, kostet es Dich nichts extra, aber ich erhalte eventuell eine kleine Provision, die ich direkt in mein Galão Projekt reinvestiere 😊
Weitere Tipps & Infos rund um Header und Navigation findest Du in meinem Blogartikel Deine Website im Fokus: Header & Navigation.
