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

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/

Beiträge nach Top Kategorie Filtern:

Hinterlasse einen Kommentar

  Abonnieren  
Benachrichtige mich bei
Datenschutz
Digital-Workshop, Besitzer: Mario Röder (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
Digital-Workshop, Besitzer: Mario Röder (Firmensitz: Österreich), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: