Lesefortschritt:

Menu-Special #9: Dropdown-Menü zentriert ausrichten

23. Juli 2024 | CSS-Stylesheet, Divi-Theme

Trick # 365 | Dieser Beitrag beinhaltet 364 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Das Drop-Down-Menü des Divi-Themes wird normalerweise links ausgerichtet dargestellt. Doch die Menüpunkte lassen sich auch zentrieren. Das geht sowohl im Menümodul als auch im Divi-Standardmenü. Wir zeigen Ihnen die Lösung für beide Varianten.

Beginnen wir mit dem Divi-Menü-Modul.

Dropdown-Menü im Menü-Modul des Divi-Themes zentrieren

Dafür benötigen Sie die folgenden CSS-Zeilen. Fügen Sie diese in das CSS-Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:

.et-menu-nav li ul.sub-menu {
left: 50%!important;
right: auto!important;
text-align: center!important;
transform: translate(-50%, 0)!important;
}

Das war auch schon der ganze Zauber.

Wenn Sie ihre Navigation jedoch nicht mit dem Menü-Modul sondern mit dem Standard-Menü darstellen, kommt eine andere Lösung zu Zug.

Dropdown-Menü im Standardmenü des Divi-Themes zentrieren

Auch für das Standard-Menü gibt es einen CSS-Block. Einfach unter Design/Costumizer/Zusätzliches CSS ins Stylesheet einbinden:

#main-header .nav li ul {
	left: 50%!important;
	right: auto!important;
	text-align: center!important;
	transform: translate(-50%, 0)!important;
}

Und … gut ist. That easy!

Werbung

Das Divi-Menü mit Icons ergänzen

Icons sind eine tolle Möglichkeit, das Menü der Website interessanter zu gestalten. Das richtige Icon sieht gut aus und gibt dem Nutzer einen Hinweis darauf, worum es sich bei dem Link handelt. Icons im Menü anzuzeigen ist überdies kein Hexenwerk.
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.