Header-Menu des Divi-Themes anpassen

31. März 2021 | CSS-Stylesheet, Divi-Theme

Das Headermenu (auch «Primary Menu» genannt) lässt sich im Customizer des Divi Themes optisch verändern. Es geht aber noch viel besser: Mit CSS haben Sie weitaus mehr Möglichkeiten, das Styling anzupassen. Wir zeigen Ihnen wie.

Eigentlich mag ich ja das Divi-Theme. Und ich baue mittlerweile Websites praktisch ausschliesslich mit Divi. Aber hin und wieder treibt mich das gute Stück in den Wahnsinn: Ums verrecken kann man die Farben des Headers für einen aktiven Link im Divi-Customizer nicht anpassen. Ok: Dann machen wir’s halt mit CSS. Geht ja auch. Eigentlich sogar noch praktischer, weil sich noch weit mehr steuern lässt als mit dem Divi-Customizer.

Folgenden Code können Sie anpassen und in Ihrem CSS-Stylesheet (unter Design/Customizer/zusätzliches CSS) einfügen:

#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a,
.nav li ul .current-menu-item a {
color: #104E8B !important; 
font-weight: 700 !importnt;
}

Das Snippet legt für alle Links des Menues eine Farbe fest und stellt die Links in «bold» dar. Allerlei Anpassungen sind natürlich möglich.

Styling noch exakter festlegen

Vielleicht möchten Sie aber die Links des Hauptmenues und der Untermenues noch ein wenig genauer definieren. Dann lassen Sie obigen Schnipsel beiseite und verwenden an seiner statt folgenden CSS-Code:

/* Aktiver Hauptmenupunkt anpassen */
#top-menu li.current-menu-item > a {
color: #104E8B !important; 
font-weight: 700 !importnt;
}
/* Aktiver Hauptmenupunkt anpassen wenn ein Untermenupunkt aktiv ist */
#top-menu li.current-menu-ancestor > a {
color: #707070 !important;
font-weight: 700 !importnt;
}
/* Aktiver Untermenupunkt anpassen */
.nav li ul .current-menu-item a {
color: ##FF00FF !important;
font-weight: 700 !importnt;
}

Eine ziemlich einfache Lösung für ein dermassen hartnäckiges Problem.

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