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

 /* Elementor Header Effekte. Füge diesen Code einfach in das "Custom CSS" Feld des Header-Abschnittes ein. Mehr Elementor Tricks auf https://robert-leitinger.com/ */

selector

/* Geschwindigkeit der Transformation */
.elementor-sticky--effects .sticky-menu-items ul li a {
 transition: .5s all ease-in-out;
}


/* Hintergrundfarbe beim Scrollen */
.elementor-sticky--effects {
background: #FFFFFF !important; 
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29); /* Entferne das, wenn du keinen Schatten möchtest */
}


/* Anderes Logo beim Scrollen */

.elementor-sticky--effects .logo img {
content:url(/wp-content/uploads/2021/11/logo-dunkel.png);
}

/* Farbe - aktive Links wenn Header ist sticky */
.elementor-sticky--effects
.menu-color a {
color: #000000 !important; 
}


/*Aktive Menü Items Farbe beim Scrollen*/
.elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active {
 color: #000000 !important;
}

/* Hoover Farbe beim Scrollen */
.elementor-sticky--effects .sticky-menu-items ul li a:hover {
 color: #000000 !important;
}

/*Farbe Hamburger Menu*/
.elementor-sticky--effects .sticky-menu-items i {
 color: #000000 !important;
}

#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.

🎉 Insider-Tipps zu den Themen künstliche Intelligenz, WordPress, SEO & Online Business
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen, etc.)

Double-Opt-In und DSGVO (du erhältst im Anschluss noch eine E-Mail, um die Anmeldung zu bestätigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der Datenschutzerklärung.

Robert Leitinger - Experte für Online Marketing, KI und SEO
Ü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 ➔

Weitere Beiträge lesen:

*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.

Nutzt du schon Elementor Pro?

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