Divi Drop Down Menü breiter/kleiner machen

Hiacynta Hess
Webdesignerin

Sprache: CSS
Level: Anfänger ⭐

Aktualisiert am:

15. Oktober 2023

In Divi hat das Drop-Down-Menü standardmäßig eine feste Breite, die sich nicht an der Anzahl der Zeichen eines Menüpunkts orientiert. Bei zu langen Menüpunkten rutschen die Buchstaben in die zweite Zeile, das schaut unprofessionell aus. Um dieses Problem zu lösen, kannst du einen speziellen CSS-Code einbinden. Mit diesem Code lässt sich die Breite des Drop-Down-Menüs individuell steuern. Den Code fügst du bei den Divi Theme Optionen unter Eigene CSS ein.

Achtung:
Je nachdem ob du dein Header mit dem Theme Builder oder dem Customizer erstellt hast, musst du zwei verschiedene Codes anwenden!

CSS Code für Header, die mit dem Customizer erstellt wurden:

/* Drop Down Menu breiter machen - Customizer Code */
@media screen and (min-width: 981px) {
.sub-menu {
 min-width: 300px;
}
#top-menu li li a {
    width: 260px;
 padding: 4px 12px;
 }
}

CSS Code für Header, die mit dem Theme Builder erstellt wurden:

/* Breite Innen Drop-Down-Menu*/
.et-menu li li a {
    padding: 6px 20px; 
    width: 260px;
}
/* Breite Aussen Drop-Down-Menu*/
.nav li ul {
    position: absolute;
    padding: 20px 0; 
    width: 300px;
}

Bei width kannst du die Breite des Drop-Down-Menüs anpassen. Hier musst du einfach nur etwas mit den Zahlen spielen, bis die Breite für dich passt.

Hat dir dieser Artikel geholfen?

Mit deiner Bewertung hilfst du mir, die Inhalte noch weiter zu verbessern.

WordPress Website selbst erstellen

Hiacynta Hess ist die Autorin des Artikels und führt seit 2004 ein Online Business. Mittlerweile unterstützt sie Online-Unternehmer bei ihrer WordPress-Website und weiterführenden Online-Marketing Maßnahmen.

Ihre Expertise und Erfahrungen zu diesen Themenbereichen teilt sie auf ihrem Blog, ihrem YouTube Kanal und in ihrem Mentoringprogramm.

Für vertiefende Einblicke und regelmäßige Updates folge Hiacynta auf Instagram. Abonniere auch ihren Newsletter in dem sie exklusive Tipps, bewährte Strategien und vieles mehr mit ihrer engagierten Community teilt. Lass dich inspirieren!

Transparenzhinweis:
Die mit einem * gekennzeichneten Links sind Affiliate Links. Diese diesen zur Orientierung und zum einfachen Finden der Produkte. Solltest du über den Link etwas bestellen, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten. Generell empfehle ich nur Produkte, die ich selbst getestet habe und die ich auch gut finde. Danke für deine Unterstützung.

Abonniere meinen Newsletter!

Mache es wie die anderen Online-Unternehmer, die regelmäßig exklusive Insidertipps für Ihr Online-Business und Ihre Marketing-Maßnahmen direkt ins Postfach bekommen.
Kostenlos und jederzeit abbestellbar.

Weitere Infos findest du in meinen Datenschutzhinweisen.

WordPress Cookie Hinweis von Real Cookie Banner