Divi-Header-Navigation ausblenden

9. Januar 2021 | CSS-Stylesheet, Divi-Theme

Die Header-Navigation in Divi eignet sich nicht für alle Websites gleichermassen. Besonders auf den kleinen One-Pagern, wo alle Inhalte direkt auf der Startseite untergebracht sind, ist der Sinn einer Header-Navigation stark beschränkt. Divi bietet von Haus aus nur die Möglichkeit, das Website-Logo auszublenden, nicht aber die Navigation. Doch es gibt eine Lösung.

Um das Logo im Divi-Theme darzustellen, die Navigation aber auszublenden, benötigen Sie ein paar Zeilen CSS-Code. Diese fügen Sie unter Design/Customizer/Zusäzliches CSS ein:

#et-top-navigation {display:none; }
@media only screen and ( min-width: 981px ) {
#logo { padding-bottom: 18px; }
.et-fixed-header #logo { padding-bottom: 10px; }
}

Mit der ersten CSS-Code-Zeile wird das Navigations-Menü ausgeblendet. Der nachfolgende CSS-Code fügt etwas Abstand unter dem Logo hinzu, damit der Header nach dem Ausblenden der Links nicht zu klein wird.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This