Lesefortschritt:

Divi-Menu-Hack #1: Separatoren im Divi-Standard-Menu anzeigen

13. Dezember 2023 | CSS-Stylesheet, Divi-Theme

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

Einheit im Divi-Zählermodul ändern

Das Divi-Theme beinhaltet ein adrettes Zählermodul. Doch standardmässig zeigt dieses stets ein Prozentzeichen als Einheit an. Das passt natürlich nicht immer. Sie können das Zeichen aber auf einfache Weise entweder ganz ausblenden oder - noch ...

Werbung

 

Pin It on Pinterest

Share This