Dropdown-Menü in Divi automatisch verbreitern bei langen Linknamen
Sind die Einträge im Dropdown-Menü zu lang, wirkt die Navigation schnell unübersichtlich oder Texte werden unschön umgebrochen.
Mit einer kleinen CSS-Anpassung lässt sich das Dropdown-Menü in Divi automatisch verbreitern, sodass auch längere Linknamen sauber dargestellt werden.
Das Problem mit langen Linknamen im Dropdown-Menü
Standardmäßig passt Divi die Breite von Dropdown-Menüs nicht automatisch an die Länge der enthaltenen Menüeinträge an.
Gerade bei umfangreicheren Websites oder aussagekräftigen Menübezeichnungen führt das dazu, dass:
-
Texte unschön umbrechen
-
Menüeinträge schwer lesbar sind
-
das Menü insgesamt unruhig wirkt
Besonders bei professionellen Websites ist das kein gewünschter Zustand.
Lösung: Dropdown-Menü per CSS automatisch verbreitern
Mit einer gezielten CSS-Regel lässt sich das Dropdown-Menü so anpassen, dass es sich an der längsten Menübezeichnung orientiert.
Dadurch bleibt die Navigation übersichtlich und gut lesbar – unabhängig von der Textlänge.
Der große Vorteil:
✅ keine Änderung am Menü selbst
✅ keine Plugins nötig
✅ jederzeit rückgängig zu machen
CSS-Code für automatisch breitere Dropdown-Menüs
.et-menu li li a {
width: auto;
min-width: 240px;
white-space: nowrap;
}
Erklärung der wichtigsten Eigenschaften
-
width: auto;
Erlaubt dem Dropdown-Menü, sich an den Inhalt anzupassen. -
min-width: 240px;
Legt eine sinnvolle Mindestbreite fest, damit das Menü nicht zu schmal wird. -
white-space: nowrap;
Verhindert Zeilenumbrüche innerhalb der Menüeinträge.
Den Wert für min-width können Sie je nach Design und Schriftgröße individuell anpassen.
Wo wird der CSS-Code eingefügt?
Der CSS-Code kann an mehreren Stellen hinterlegt werden:
-
im Customizer unter
Design → Customizer → Zusätzliches CSS -
oder im Divi Theme Options Bereich
-
alternativ in einem Child-Theme
Für kleinere Anpassungen empfiehlt sich der Customizer, da Änderungen dort sofort sichtbar sind.
Hinweis für Divi 4 und Divi 5
Die gezeigte Lösung funktioniert sowohl mit Divi 4 als auch mit Divi 5, da sich die grundlegende Menüstruktur nicht geändert hat.
Gerade bei der Umstellung auf Divi 5 ist dies eine einfache Möglichkeit, bestehende Navigationen optisch aufzuwerten, ohne größere Umbauten vorzunehmen.
Fazit
Lange Linknamen im Dropdown-Menü müssen kein Designproblem sein.
Mit wenigen Zeilen CSS lässt sich die Navigation in Divi deutlich verbessern und professioneller darstellen – ganz ohne zusätzliche Plugins.