Trick # 300 | Dieser Beitrag beinhaltet 420 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Unlängst haben wir Ihnen gezeigt, wie Sie Separatoren im Divi-Menu-Modul platzieren. Das funktioniert natürlich auch, wenn Sie das Standard-Menu des Divi-Themes verwenden. Der CSS-Code ist freilich etwas anders.
Folgenden CSS-Code fügen Sie ihn in das Stylesheet Ihrer Website ein. Sie können dieses unter Design/Customizer/Zusätzliches CSS bearbeiten:
Verwenden Sie das Divi-Menu-Modul anstelle des Divi-Standardmenus? Kein Problem. Auch dort können Sie Separatoren einfügen. Lesen Sie einfach unseren Beitrag «Separatoren im Menu-Modul des Divi-Themes anzeigen».
/* Separator festlegen */
.et_header_style_left #top-menu > .menu-item + .menu-item:before,
.et_header_style_centered #top-menu > .menu-item + .menu-item:before,
.et_header_style_split #top-menu > .menu-item + .menu-item:before
{
position: absolute;
left: -15px; /* Half of default 22px right padding and 4px adjust to center (to compensate for space char between li) */
content: '|';
font-size: smaller;
color: #000000;
}
/* Position in den Mega-Manus anpassen */
.et_header_style_left #top-menu > .menu-item + .mega-menu:before {
position: relative;
top: 1.1em;
}Die Navigationspunkte im Divi-Standardmenu werden nun mit einem «|» voneinander getrennt. Wenn Sie lieber ein anderes Zeichen als Separator verwenden möchten, ersetzen Sie das «|» auf Zeile 8 des Codes. Wenn Sie eine andere Separatorfarbe möchten, können Sie diese auf Zeile 10 festlegen.
Werbung
Werbung
