- Problem
Um den Header auf “Sticky Top” einzustellen gibt es in Elementor eine einfache Einstellung. ABER um den Header beim Scrollen zu verkleinern oder die Farbe zu ändern leider noch nicht.
- Lösung
Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.
- STEP BY STEP
Schritt 1: Header wie gewohnt erstellen
Erstelle wie gewohnt einen Header und stelle Ihn auf Sticky top. Gehe zu –> Erweitert –> Bewegungseffekte –> Sticky –> Oben
Und stelle “Offset Effekte” auf 1.
Z-Index auf 9
Schritt 2: Logo & Menü beim Scrollen verkleinern
Wir fangen mit dem Logo an. Wichtig ist, dass Du keine Breite eingestellt hast. Falls doch, merk dir die Werte und lösche sie alle wie im Bild.
Jetzt gib dem Logo/Bild eine eindeutige CSS Klasse z.B. Logo1
Jetzt füge den Code unter Erweitert –> “Eigene CSS” ein.
Falls Du eine andere CSS Klasse genommen hast, dann musst du diese entsprechend im Code ändern.
/* --- LOGO ---- */
/* Logo sizing before sticky */
.Logo1 img {
width
:
auto
;
max-height
:
120px
;
transition:
all
0.5
s ease;
}
/* Logo sizing after sticky */
.elementor-sticky--effects .Logo1 img {
max-height
:
65px
;
width
:
auto
;
}
Jetzt vergeben wir für das Menü auch eine CSS Klasse und fügen wieder den entsprechenden CSS Code ein. auch hier müssen die Voreinstellungen bei der Schriftgröße gelöscht sein.
/* — Menü —- */
/* menü sizing before sticky */
.menu1 {
font-size: 15px;
transition: all 0.5s ease;
}
.elementor-sticky–effects .menu1 {
font-size: 10px;
}
Schritt 3: Hintergrundfarbe beim Scrollen ändern.
um die Farbe ds gesamten Header zu ändern, füge folgenden Code im CSS ein.
Die Farbe ist hier in RGBA angegeben um eine Transparenz darzustellen. Du kannst aber auch HEX Farbcodes verwenden.
Ich hoffe, ich konnte Dir mit diesem Post weiterhelfen.
Lass gerne Feedback oder ne Frage da.
/* Background color on sticky */
.elementor-sticky--effects {
background-color
:rgba(
255
,
255
,
255
,
0.85
);
transition:
all
0.5
s ease;
}
- Fertig