Wir kennen den Divi-typischen Effekt bei feststehender Navigationsleiste, bei der das Logo erst groß zu sehen ist und beim Scrollen später verkleinert im Header verschwindet.

In diesem Tutorial zeige ich euch, wie ein Logo automatisch beim Scrollen einer Divi Seite eingeblendet wird, bzw. von oben aus dem nichts einfährt. Den Effekt habe ich auf meiner eigenen Seite eingebaut, da ich das Logo in der Menüleiste als störend empfand. Beim Öffnen der Seite ist das Logo groß im Content zu sehen und so wäre es doppelt gewesen, also musste es weg. Beim Scrollen sollte es aber wieder erscheinen und stehen bleiben.

Vorbereitung

Als erstes benötigen wir ein Logo, welches wir ganz gewöhnlich über die „Divi-Optionen“ als Logo der Webseite festlegen. Es ist auf jeden Fall gut, wenn die genaue Breite und Höhe des Logos bekannt ist. Wer Qualitätsverluste durch Verkleinerung vorbeugen möchte, sollte auf ein SVG-Dateiformat wechseln.

Zusätzlich sollte „Feste Navigationsleiste“ in den „Divi-Optionen“ eingeschaltet sein.

CSS Code für die Navigationsleiste

Nun benötigen wir noch etwas CSS-Code, den wir in den Styles des „Child Themes“ platzieren oder in den „Divi-Theme-Optionen“ in „Custom CSS“. Ich empfehle immer ein Child-Theme zu verwenden.

/*-Größe des Logos festlegen-*/
#logo { 
 height: 100px;
 max-height: 100px !important;
 position: absolute;
 width: 200px;
 border: solid 2px #000000;
}

/*-Die Position vor dem Scrollen ist in meinem Fall min. Logo-Höhe + Rahmenbreite-*/
.et_header_style_left .logo_container {
 transition: all 0.8s ease-in-out 0s; /*-Animation out-*/
 top: -122px; /*-Position des Logos vor dem Scrollen-*/
}

.et-fixed-header .logo_container {
 top: 20px; /*-Position des Logos nach dem Scrollen-*/
 transition: all 0.8s ease-in-out 0s; /*-Animation in-*/
}
/*---Der folgende Abschnitt wird benötigt, falls eine feste Höhe der Navigationsleiste gewünscht ist---*/
#page-container {
 padding-top: 0px !important;
}

.et_fixed_nav #et-top-navigation {
 transition: none;
 padding-top: 16px !important;
}

.et_fixed_nav #main-header, .et_fixed_nav #top-header { 
height: 60px; /*-feste Höhe der Navigationsleiste-*/ 
}

Abschließende Bemerkungen

Dies ist die schnellste und einfachste Methode. Da keine eigenen Klassen angegeben werden können für Logo und Navigationscontainer, sollte nach einem Update unbedingt die Funktionalität überprüft werden. Um komplette Kontrolle über die Navigationsleiste und Logo zu haben, sollte der Divi-Header ausgeblendet und in den Seiten selbst erstellt werden mit Bild und Navigationsmodul.

Durch das Abändern der Animationslänge und des Effekts, lassen sich so sehr eindrucksvolle neue Ideen verwirklichen. Bei einem Kunden z.B. habe ich vor dem Scrollen das ganze Logo angezeigt und nach dem Scrollen nur noch den Schriftzug, der unter dem Logo steht. Bei Quadratischen Logos ist das eine Möglichkeit zu verhindern, dass das Logo in Microgröße im Menü verschwindet.

Das Beispiel mit obigem Code und Abänderungen findet ihr hier: www.flyingfox-web.com.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.