Sticky Header mit Elementor

Teilen auf:

Facebook
LinkedIn
Email

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/

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links.
Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.

5 Kommentare

  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

  2. 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

Schreibe einen Kommentar

Ähnliche Artikel

Elementor Snippets

Hier eine kleine Übersicht über Code Snippets die euch das Arbeiten mit Elementor erleichtern. Zum Einfügen der Codes am besten das Plugin „Code Snippets“ benutzen: