Tipps, Hilfestellung und Erfahrungen rund um WordPress

Elementor PRO Header, Sticky, verkleinere Logo & ändere die Farbe beim Scrollen

Teile diesen Post

Share on facebook
Share on whatsapp
Share on linkedin
Share on email
Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.

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. 

Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.

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.5s 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.5s ease;
}

Diese Themen könnten Dich auch interessieren

Was suchst Du?

Werbung

Meine Hosterempfehlungen

Wer schreibt ?

Hi, ich bin Christian. Ich arbeite freiberuflich als Webdesigner, bin Gründer der Seite websites4success.com und biete WordPress Support für meine Kunden an. Wie ihr wisst, ist WordPress sehr dynamisch und so stoße ich in meinem Arbeitsalltag immer wieder auf neue Probleme, Herausforderungen und Hürden und muss neue Lösunge finden.
Um auch andere an meinem Wissen und meinen Lösungen  teilhaben zu lassen, habe ich diesen Blog gestartet und teile hier Tipps und Erfahrungen aus meinem Arbeitsalltag.

Wenn´s Fragen gibt, immer raus damit. Ich versuch Dir direkt zu helfen oder die Frage vielleicht in einem kommenden Beitrag zu beantworten. Kommst Du allein nicht weiter, kannst Du mich auch gerne beauftragen.