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/

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: 225

Ein Kommentar

  1. Hallo

    ich finde super diesen Artikel.

    Kann ich den Header beim runterscrollen ausblenden und beim hochscrollen wieder einblenden?

    Kannst du mir ein Code dafür schreiben bitte?

    Dieses Plugin was ich momentan habe, macht mir Schwierigkeiten mit Mobile(Sticky Header Effects for Elementor)

    glg Leo

Schreibe einen Kommentar