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.

Sticky Header mit Elementor 1

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.

Sticky Header mit Elementor 2

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

Sticky Header mit Elementor 3

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”

Sticky Header mit Elementor 4

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

Standardbild
Mario
Hier schreibt Mario Röder, Gründer und Inhaber von Digital-Workshop.at. Ich helfe Unternehmen und Online Shop Betreibern, ihre Webseite zu optimieren und zu pflegen. Somit haben Sie mehr Zeit für Ihr Unternehmen und mehr Erfolg.
Artikel: 221
Abonnieren
Benachrichtige mich bei
0 Comments
Inline Feedbacks
View all comments
Datenschutz
Digital-Workshop, Inhaber: Mario Röder (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Digital-Workshop, Inhaber: Mario Röder (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.