Trick # 496 | Dieser Beitrag beinhaltet 771 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Standard-Menü des Divi-Themes zeigt – bei vorhandenem Submenü – einen kleinen Pfeil nach unten an, um anzuzeigen: Da kommt noch mehr. Dieses Symbol lässt sich auf den ersten Blick nicht anpassen – aber wirklich nur auf den ersten Blick.
Das Standard-Menü des Divi-Themes zeigt Links bei vorhandenem Untermenü mit einem kleinen Pfeilsymbol an. So wie nebenan:
Es ist aber auch möglich, dieses Standard-Icon anzupassen. Zur Wahl haben Sie die Icons aus dem Divi-Angebot, welche Sie unter diesem Link finden.
Wir haben für unser Beispiel einen Pfeil nach unten gewählt, der von einem Kreis umgeben ist. Dieser hat im Divi-Icon-Font den Code «G». Um das Icon zu verwenden, benötigen wir nur den Code-Teil zwischen dem «x» und dem «;». In unserem Beispiel also «47».
Nun folgt etwas CSS-Code, den Sie in das CSS-Stylesheet Ihrer WordPress-Installation einfügen – unter Design/Customizer/Zusätzliches CSS:
#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
content: "\47";
}Unser Icon mit der Nr. «47» finden Sie in Zeile 2 des Codes. Da müssten Sie nun den Code des von Ihnen gewünschten Divi-Icons eintragen.
Nach der Anpassung des CSS-Stylesheet sieht nun der Menüpunkt von oben so aus:
Doch da geht noch mehr:
Anderes Icon beim Hovern anzeigen
Sie können auch bestimmen, dass – wenn die Maus über den Menüpunkt bewegt wird – ein anderes Icon angezeigt wird. Dafür müssen Sie wieder etwas Passendes im Divi-Icon-Portfolio suchen.
Zusätzlich kommt ein anderer CSS-Block zum Zug – Sie finden ihn in der Folge. Auch dieser gehört ins CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS:
#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
content: "\4c";
color:#000095;
}
#et-secondary-nav .menu-item-has-children:hover>a:first-child:after, #top-menu .menu-item-has-children:hover>a:first-child:after {
content: "\50";
}Die Zeilen 2, 3 und 7 können Sie natürlich nach Belieben anpassen: In Zeile 2 jenes Icon, das im Normalfall angezeigt werden soll, in Zeile 7 jenes, das beim Hovern aktiv sein muss. In Zeile 3 haben wir noch die Farbe definiert, in welcher das Navigationsicon im Normalfall erscheinen soll.
Alles ist natürlich fakultativ und Sie sollten die Stylings den Gegebenheiten Ihres Webdesigns anpassen.
Werbung
Werbung
