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