Lesefortschritt:

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

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

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This