Elementor Header Effekte beim Scrollen mit CSS (copy & paste)

Elementor Header Farbe, Logo ändern beim Scrollen

In diesem Beitrag zeige ich dir, wie du in Elementor den Header beim Scrollen ändern kannst (Hintergrundfarbe, Logo, Farbe der Menü-Schrift, Farbe des Hamburger-Icon, etc.).

Das alles funktioniert mit einem einfachen CSS-Code, den du dir hier kopieren und dann einfach bei deiner Webseite einfügen kannst.

In diesem Video demonstriere ich den Effekt:

Das ganze funktioniert allerdings nur dann, wenn du den Header auch wirklich mit Elementor erstellt hast. Dafür benötigst du die Pro-Version von Elementor (hier kannst du dir die Preise ansehen*).

Kommen wir jetzt aber zur Schritt für Schritt Anleitung:

#1 Header beim Scrollen anhängen (Sticky Header)

Als erstes muss der Header logischerweise beim Scrollen angehängt bleiben (Sticky Header). Wenn du das noch nicht gemacht hast, kannst du es hier einstellen:

Erweitert – Bewegungseffekte – Sticky: oben

elementor header anhängen (sticky)

Setze zusätzlich die Option Offset Effekte auf 1 oder höher.

#2 Benötigte CSS-Klassen einfügen

Damit das ganze korrekt funktioniert, müssen wir CSS-Klassen definieren. Das klingt zwar kompliziert – ist aber ganz einfach 🙂

2.1 CSS Klasse beim Header-Abschnitt einfügen

Als erstes musst du beim Header-Abschnitt eine CSS Klasse einfügen.

Klicke dafür mit der rechten Maustaste auf den Header Abschnitt (Abschnitt bearbeiten), dann auf Erweitert.

Bei CSS-Klassen dann einfach dieses Wort eingeben (ohne Punkt davor):

stickyheadersection
css klasse header-abschnitt

2.2 CSS Klasse beim Logo-Bild einfügen

Jetzt einfach beim Logo auch eine CSS-Klasse einfügen. Klicke dafür mit der rechten Maustaste auf dein Logo (Bild bearbeiten), dann auf Erweitert.

Bei CSS-Klassen dann einfach dieses Wort eingeben (ohne Punkt davor):

logo
css klasse logo

2.3 CSS Klassen beim Navigationsmenü einfügen

Jetzt noch zwei Klassen beim Navigationsmenü einfügen.

Klicke dafür mit der rechten Maustaste auf das Menü (Navigationsmenü bearbeiten), dann auf Erweitert.

Bei CSS-Klassen dann einfach diese zwei Wörter eingeben (ohne Punkt davor), einfach mit einem Abstand (Leerzeichen) dazwischen:

menu-color sticky-menu-items
css-klasse navigationsmenü

#3 CSS Code einfügen (copy & paste)

Jetzt kannst du einfach den CSS-Code kopieren und einfügen. Klicke dazu mit der rechten Maustaste auf den Header-Abschnitt (Abschnitt bearbeiten), dann auf Eigenes CSS.

Hier kannst du den folgenden CSS-Code einfach reinkopieren.

css in elementor hinzufügen

Inhalt freischalten (kostenlos)

In meinem kostenlosen Newsletter erhältst du exklusive Inhalte, Elementor Tricks und CSS Codes.

Einfach kostenlos abonnieren und ich schicke dir das Passwort zum Freischalten des folgenden Inhalts.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerklärung.
CSS Code jetzt freischalten
Nutze das Passwort, dass ich dir zugeschickt habe

#4 CSS Code weiter anpassen

Wenn du Schritt #1 bis #3 erledigt hast, dann sollte jetzt alles ordnungsgemäß funktionieren. Natürlich kannst du jetzt noch Anpassungen vornehmen (Farben, Logo, etc.).

Farben anpassen

Die Farben im CSS-Code kannst du ganz einfach ändern. Ich habe in diesem Code immer die Farben schwarz (Farbcode #000000) und weiß (#FFFFFF) genommen. Füge hier einfach den Farbcode ein, den du verwenden möchtest.

Farben beim Scrollen ändern
Überall wo du color: findest, kannst du einfach deinen HEX-Code reinkopieren.

Header Logo anderes Bild

Nachdem du den CSS Code eingefügt hast, muss du nur noch die URL der Bilddatei ändern. Diese findest du einfach in deiner WordPress Mediathek bei dem jeweiligen Bild.

URL neue Logo Datei - WordPress Mediathek

Wenn du dein Logo beim Scrollen gar nicht ändern möchtest, dann lösche dieses Stück des CSS-Code einfach.

Fragen oder Hilfe benötigt?

Bitte beachte, dass ich keinen kostenlosen Support per Mail anbieten kann – dafür fehlt mir einfach die Zeit. Wenn du Fragen zum Code hast, oder irgendetwas nicht funktioniert, dann hinterlasse bitte hier einfach ein Kommentar.

Newsletter abonnieren und keinen Beitrag mehr verpassen!
Ich schicke dir eine E-Mail, wenn ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerklärung.

Inhaltsverzeichnis
Weitere Beiträge lesen:
Über den Autor
Robert Leitinger

In den letzten 10 Jahren habe ich mehrere erfolgreiche Online-Projekte umgesetzt.
Im Jahr 2018 folgte die Gründung meiner eigenen Webdesign und Online Marketing Agentur.
Ergänzend zu diesem Blog betreibe ich auch einen YouTube Kanal.

Mehr über mich erfahren

Schreibe einen Kommentar

Kennzeichnung & Information: Affiliate Links / Partnerlinks
Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.

Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: Datenschutzerklärung.

TEILEN ist wie TRINKGELD für mich : -)
Vielen Dank!

Inhaltsverzeichnis (scroll down)

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erfährst du mehr über die Pro-Version zu Elementor

Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden dieses Formulars erteilst Du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Weitere Infos findest du in der Datenschutzerklärung.