Sticky Header mit Elementor

Einen Sticky Header Effekt mit Elementor zu erstellen ist relativ einfach. Dazu benötigt man kein extra Plugin. Mit etwas CSS oder copy&paste bekommen wir diesen Effekt.

Zuerst einen eigenen Header erstellen und diesen Abschnitt „sticky“ machen. Der „Offset Effekt“ (scroll in pixel) gibt an, wann der sticky Effekt ausgeführt werden soll.

Falls ihr auch das Logo verkleinern möchtet, dem Logo eine Klasse „logo“ geben

Jetzt unter „Erweitert – Eigenes CSS“ folgenden CSS Code eintragen

/* ".elementor-sticky--effects" ist die Klasse, wenn scroll aktiv */

/* Hintergrundfarbe wird weiß wenn scroll */

.elementor-sticky--effects {
background-color:rgba(255,255,255,1);
transition: all 0.5s ease;
}

/* Menü Farbe ändern on scroll */
.elementor-sticky--effects .elementor-nav-menu a{
color: #333!important;
transition: all 0.5s ease;
}
 
/* - LOGO - Logo eine eigene klasse geben */
/* Logo größe normal */
.logo img {
width: auto;
max-height: 120px;
transition: all 0.5s ease;
}
 
/* Logo größe on scroll */
.elementor-sticky--effects .logo img {
max-height: 60px;
width: auto;
}

Diesen Code eintragen unter „Eigenes CSS“

Mehr Infos zu „sticky Header“ direkt bei Elementor: https://elementor.com/blog/sticky-scrolling-effect/