Trick # 342 | Dieser Beitrag beinhaltet 841 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Dem Menü-Modul des Divi-Themes – und ebenso dem Standard-Divi-Menü – lassen sich Trennlinien hinzufügen, welche die einzelnen Menüpunkte optisch abschliessen. Wir zeigen Ihnen wie das mit dem Modul geht und wie es mit dem Standard-Menü funktioniert.
Wir befassen uns zunächst mit der Lösung für das Menü-Modul des Divi-Themes.
Um vertikale Trennlinien zwischen den Menüpunkten zu platzieren benötigen Sie ein wenig CSS-Code. Den folgenden Block fügen Sie in das CSS-Stylesheet Ihrer Website ein – via Design/Customizer/Zusätzliches CSS:
.et_pb_menu nav > ul > li:not(:last-child) {
border-right: 1px solid #293280;
}
.et_pb_menu li a {
padding: 4px 20px;
}Den CSS-Code können Sie freilich nach Ihren Bedürfnissen anpassen.
Doch es gibt ja noch das Standard-Menü. Um hierin Separators zu platzieren benötigen Sie eine leicht andere Lösung.
Trennlinien im Standard-Menü des Divi-Themes
Auch für die Separator im Divi-Standard-Menü benötigen Sie etwas CSS-Code, den Sie unter Design/Customizer/Zusätzliches CSS platzieren können:
#top-menu li:not(:last-child) {
border-right: 1px solid #293280;
margin-bottom: 20px;
}
#et-top-navigation nav > ul > li > a {
padding-bottom: 4px!important;
padding-left: 20px;
}Auch dieser Code lässt sich farblich anpassen und die Abstände anders definieren. Das Standard-Menü präsentiert sich in unserem Beispiel wie folgt:
Variante ohne Trenner:
Variante mit Trenner:
Ziemlich einfach. Oder?
Werbung
Werbung
