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/
5 Kommentare
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
Hallo
der Artikel ist sehr gut beschrieben. Ich habe meine Sticky-Header geschafft. Aber ich schaffe es nicht, dass mein Bild im Header ist. So wie oben beim Beispiel.
Was mache ich falsch.
Über eine Antwort würde ich mich sehr freuen.
Lg Larena
Wie meinst du „das mein Bild im Header ist“?
Das Logo baust du ja mit Elementor ein. Wichtig ist da nur das du dem Logo auch die Klasse „logo“ gibst
Hallo Mario,
ich habe mich falsch ausgedrückt. Ich spreche nicht vom Logo. Beim obigen Beispielbild ist das Hintergrundbild (Skifahrer) auch hinter dem Menu, erst beim scrollen ändert sich das.
Bei mir bleibt alles weiß. Kann leider keine Website angeben zum zeigen, arbeite nur auf Localhost.
Screenshot kann ich hier auch nicht einfügen.
Lg Larena
Hallo Mario,
ich habe es rausgefunden. Die Transparenz im Header funktioniert bei mir nicht. Liegt glaube ich aber am Theme Oceanwp. Habe schon alles propiert der Header wird nicht transparent.
Lg Renate