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 !important;
}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 !important;
}
/* Aktiver Hauptmenupunkt anpassen wenn ein Untermenupunkt aktiv ist */
#top-menu li.current-menu-ancestor > a {
color: #707070 !important;
font-weight: 700 !important;
}
/* Aktiver Untermenupunkt anpassen */
.nav li ul .current-menu-item a {
color: ##FF00FF !important;
font-weight: 700 !important;
}Eine ziemlich einfache Lösung für ein dermassen hartnäckiges Problem.
Werbung
Werbung
