Divi 5 Mobile-Menü anpassen: Hamburger, Farben & klappbare Untermenüs

Zusammenfassung: Das Mobile-Menü von Divi zeigt Untermenüs immer komplett aufgeklappt — auch in Divi 5. Dieser Artikel zeigt, wie du das Hamburger-Icon stylst, das Menü farblich anpasst und Untermenüs mit einem kurzen CSS/JS-Snippet klappbar machst. Jeder Code-Block wurde auf einer echten Divi-5.8-Installation getestet; alle Screenshots stammen von dieser Installation. Gute Nachricht vorab: Die bekannten CSS-Klassen aus Divi 4 funktionieren im Menü-Modul weiterhin.

Die Ausgangslage: So verhält sich das Divi-5-Mobile-Menü

Unterhalb von 980 Pixeln Viewport-Breite ersetzt das Divi-Menü-Modul die Desktop-Navigation durch das Hamburger-Icon — das haben wir auf Divi 5.8 nachgemessen: Bei 985 px ist die Desktop-Navigation sichtbar, ab 980 px übernimmt der Burger. Der klassische Breakpoint aus Divi 4 gilt also unverändert, solange du im neuen Breakpoint-System nichts anderes definierst.

Öffnet man das Menü, zeigt sich das Problem, das Divi-Nutzer seit Jahren begleitet — und das auch Divi 5 nicht gelöst hat:

Untermenüs sind im Mobile-Menü immer aufgeklappt. Es gibt dafür bis heute keine Einstellung im Modul. Bei drei Unterpunkten ist das verschmerzbar, bei einer echten Website mit 5 Hauptpunkten und je 4 Unterseiten scrollt der Besucher durch 25 Zeilen. Die Lösung steht weiter unten — vorher bringen wir das Icon und die Farben in Form.

Gut zu wissen: Die CSS-Klassen aus Divi 4 gelten weiter

Divi 5 speichert Seiten technisch komplett anders als Divi 4 (block-basiert statt Shortcodes). Die gerenderten CSS-Klassen des Menü-Moduls sind aber gleich geblieben — das haben wir am Quelltext einer Divi-5.8-Seite verifiziert:

• .et_pb_menu — das Menü-Modul
• .et_mobile_nav_menu / .mobile_menu_bar — Container und Hamburger-Icon
• .et_mobile_menu — das aufgeklappte Mobile-Menü
• .menu-item-has-children und .sub-menu — Menüpunkte mit Unterpunkten

Deine Divi-4-Snippets fürs Mobile-Menü funktionieren also in aller Regel weiter. Ein Unterschied ist uns beim Testen trotzdem aufgefallen: Divi 5 setzt eigene Regeln teils mit höherer Priorität — ohne !important greifen manche Anpassungen nicht. Die Snippets unten berücksichtigen das bereits.

Wohin mit dem Code?

• CSS: WordPress-Adminbereich → Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS (ganz unten). Alternativ ins Child-Theme-Stylesheet.
• JavaScript: Divi → Theme-Optionen → Integration → Feld „Code zum head hinzufügen”, eingerahmt von <script>…</script>. Alternativ als Datei im Child-Theme.

Beides gilt unter Divi 5 unverändert — die Theme-Optionen existieren weiter wie gewohnt.

Schritt 1: Hamburger-Icon anpassen (Farbe & Größe)

Das Hamburger-Icon ist kein Bild, sondern ein Zeichen aus Divis Icon-Font (ETmodules), gerendert über ein ::before-Pseudo-Element. Farbe und Größe steuerst du deshalb per CSS:

/* Hamburger-Icon: Farbe und Groesse */
.mobile_menu_bar::before {
  color: #B1883E !important;
  font-size: 40px !important;
}

Standard sind 32 px. Werte zwischen 32 und 44 px funktionieren gut — ab 44 px erfüllt das Icon nebenbei die Mindestgröße für Touch-Ziele nach WCAG.

Schritt 2: Farben des aufgeklappten Menüs ändern

Das aufgeklappte Mobile-Menü (.et_mobile_menu) bekommt standardmäßig einen weißen Hintergrund und erbt die Linkfarben. So stellst du es z. B. auf dunkel um:

/* Mobile-Menue: dunkler Hintergrund, helle Links */
.et_mobile_menu {
  background-color: #111111 !important;
}
.et_mobile_menu li a {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

Die blaue Linie oberhalb des Menüs ist übrigens Divis Standard-Akzent (border-top am Menü-Container). Sie färbst du mit .et_mobile_nav_menu .mobile_nav { border-color: … } oder direkt im Modul unter Design → Rahmen um.

Schritt 3: Untermenüs klappbar machen (das Kern-Snippet)

Jetzt zum eigentlichen Problem. Ziel: Unterpunkte sind standardmäßig zu, ein Plus/Minus-Symbol am Elternpunkt klappt sie auf und zu.

CSS (Theme-Optionen → Benutzerdefiniertes CSS):

/* Untermenues im Mobile-Menue standardmaessig einklappen */
.et_mobile_menu .menu-item-has-children > .sub-menu {
  display: none !important;
}
.et_mobile_menu .menu-item-has-children.dt-open > .sub-menu {
  display: block !important;
}

/* Plus/Minus-Indikator am Elternpunkt */
.et_mobile_menu .menu-item-has-children > a {
  position: relative;
}
.et_mobile_menu .menu-item-has-children > a::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 18px;
}
.et_mobile_menu .menu-item-has-children.dt-open > a::after {
  content: '−';
}

JavaScript (Theme-Optionen → Integration → head, inklusive <script>-Tags):

<script>
document.addEventListener('DOMContentLoaded', function () {
  document
    .querySelectorAll('.et_mobile_menu .menu-item-has-children > a')
    .forEach(function (link) {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        link.parentElement.classList.toggle('dt-open');
      });
    });
});
</script>

Das Snippet ist bewusst reines Vanilla-JavaScript ohne jQuery. Zwar liefert auch Divi 5 jQuery noch mit aus, aber Elegant Themes baut die Abhängigkeit schrittweise ab — so bleibt der Code zukunftssicher.

So sieht das Ergebnis aus:

Wichtiger Hinweis zur Verlinkung: Das Snippet fängt den Klick auf den Elternpunkt ab (preventDefault) — er öffnet dann nur noch das Untermenü, statt eine Seite aufzurufen. Das ist sauber, wenn der Elternpunkt ohnehin nur Container ist (in WordPress: Individueller Link mit # als URL). Soll der Elternpunkt selbst eine Seite bleiben, verlinke sie zusätzlich als ersten Unterpunkt („Übersicht”) — das ist auch für Desktop-Nutzer das klarere Muster.

Häufige Fehler

Das Menü zeigt „Sample Page” statt deiner Menüpunkte

Ein Stolperstein direkt aus unserem Test: Im Visual Builder zeigt das Dropdown Menü den Namen deines Menüs als graue Vorbelegung an — das sieht zugewiesen aus, ist es aber nicht. Gespeichert wird erst, wenn du das Menü im Dropdown aktiv auswählst (danach erscheint ein blauer Änderungspunkt neben dem Feld). Bleibt die Zuweisung aus, rendert WordPress im Frontend die Fallback-Seitenliste — im Builder sieht alles richtig aus, live nicht.

Die CSS-Anpassungen greifen nicht

Divi 5 setzt einige Menü-Stile mit hoher Spezifität. Prüfe zuerst, ob dein Snippet !important enthält (siehe oben). Greift es immer noch nicht, liegt fast immer ein Caching-Plugin oder Divis statisches CSS dazwischen: Divi → Theme-Optionen → Builder → Erweitert → Statische CSS-Dateigenerierung leeren bzw. temporär deaktivieren und neu testen.

Nach einem Divi-Update ist das Verhalten anders

Divi 5 wird derzeit in hoher Taktung aktualisiert. Teste Menü-Snippets nach größeren Updates kurz durch — und wenn du viele Anpassungen hast, sammle sie in einem Child-Theme statt in den Theme-Optionen, damit sie versionierbar sind. Die Klassennamen selbst waren in unseren Tests über die 5.x-Versionen hinweg stabil.

Das gleiche Klapp-Prinzip für Inhalte statt Menüs: Divi 5 Accordion & Toggle anpassen — inklusive „alle Einträge zu”-Snippet und FAQ-Schema. Passend zum Header außerdem: Mega-Menü ohne Plugin bauen und Sticky Header fixieren & verkleinern.

Alle unsere Divi-5-Anleitungen und Problemlösungen an einem Ort: zum Divi-5-Tutorial-Hub.

Häufige Fragen

Bei welcher Breite wechselt Divi 5 zum Hamburger-Menü?

Standardmäßig unterhalb von 980 px Viewport-Breite — wir haben es auf Divi 5.8 nachgemessen (985 px: Desktop-Navigation, 980 px: Hamburger). Mit dem neuen Breakpoint-System von Divi 5 lässt sich diese Grenze anpassen; ohne eigene Einstellung bleibt es beim klassischen Wert.

Funktionieren meine alten Divi-4-Menü-Snippets in Divi 5?

Überwiegend ja. Die gerenderten CSS-Klassen des Menü-Moduls (.et_mobile_menu, .mobile_menu_bar, .sub-menu usw.) sind in Divi 5 unverändert. Ergänze aber !important bei Display- und Farbregeln — Divi 5 setzt eigene Stile teils mit höherer Priorität durch.

Kann ich Untermenüs ohne Code klappbar machen?

Im Menü-Modul selbst gibt es dafür keine Einstellung — auch in Divi 5 nicht. Ohne Code bleiben zwei Wege: ein Plugin (z. B. ein Mobile-Menü-Plugin aus dem Divi-Marketplace) oder ein komplett eigener Header mit Off-Canvas-Menü. Für die meisten Websites ist das CSS/JS-Snippet aus diesem Artikel die schlankste Lösung: keine Plugin-Abhängigkeit, keine Lizenzkosten, volle Kontrolle.

Warum sehe ich meine Änderungen nicht sofort?

Fast immer Caching: Browser-Cache, Caching-Plugin oder Divis statische CSS-Generierung. Erst Caches leeren, dann in einem privaten Fenster testen. Im Visual Builder wirken CSS-Snippets aus den Theme-Optionen außerdem manchmal erst nach dem Speichern und Neuladen des Frontends.

Gilt das alles auch für das Standard-Divi-Menü ohne Theme Builder?

Ja. Ob das Menü aus einem Theme-Builder-Header mit Menü-Modul kommt oder aus dem klassischen Divi-Standard-Header — das Mobile-Menü nutzt dieselben Klassen (.et_mobile_menu, .mobile_menu_bar), die Snippets wirken in beiden Fällen.

Quellen

• Eigene Tests auf einer Divi-5.8-Installation (Juli 2026) — alle Snippets und Screenshots stammen aus dieser Umgebung
• Divi 5 Official Release — Elegant Themes Blog
• Divi Menu Module — Elegant Themes Dokumentation