FAQ & News

Deine Wissensquelle für Web & WordPress
Im Blog Archiv findest du sämtliche Beiträge zu Webdesign, Hosting, WordPress-Tipps und digitalen Trends. Durchsuche Themen nach Kategorien oder nutze die Übersicht, um genau das zu finden, was dich aktuell interessiert. 

Divi Mobile-Menü funktioniert nicht? Ursachen & Lösungen

Wenn dein mobiles Menü im Divi Theme nicht funktioniert, sich nicht öffnet oder hinter dem Header verschwindet, liegt das fast immer an einem Konflikt mit CSS-Einstellungen, Plugins oder dem Theme Builder. In dieser Anleitung erfährst du Schritt für Schritt, wie du das Problem behebst – dauerhaft und ohne Zusatz-Plugins.

1. Divi und WordPress aktualisieren

Bevor du an CSS oder Code arbeitest, führe zuerst alle Updates durch. Öffne Dashboard > Updates und aktualisiere:

  • WordPress Core
  • Divi Theme
  • Alle aktiven Plugins

Viele Fehler im mobilen Menü entstehen nach Updates oder inkompatiblen Versionen. Nach dem Update lösche bitte Browser- und Server-Cache.

2. Overflow-Einstellungen prüfen

Wenn das mobile Menü „unsichtbar“ ist oder hinter dem Header liegt, wird es oft durch overflow:hidden abgeschnitten. Stelle sicher, dass in deinem Theme Builder Header der Überlauf auf „sichtbar“ gesetzt ist:

  • Öffne Divi > Theme Builder
  • Bearbeite die Zeile mit dem Menümodul
  • Gehe zu Erweitert > Sichtbarkeit und setze „Horizontaler“ & „Vertikaler Überlauf“ auf sichtbar
  • Unter Position: Stelle die Position auf relativ

3. Z-Index und CSS korrigieren

Wenn das Menü sichtbar, aber nicht anklickbar ist oder hinter anderen Elementen liegt, fehlt häufig der passende Z-Index. Füge in den Theme Optionen > Benutzerdefiniertes CSS folgenden Code ein:

/* Mobile Menü sichtbar machen */
.et_mobile_menu,
#et-top-navigation,
.et_header_style_left #et-top-navigation nav ul li ul.sub-menu {
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Header darf Dropdown nicht abschneiden */
#main-header,
.et-l--header .et_pb_section,
.et-l--header .et_pb_row {
  overflow: visible !important;
}

4. Caching-Plugins und JS-Optimierung prüfen

Wenn sich das Menü gar nicht öffnet, kann das JavaScript durch ein Caching- oder Optimierungs-Plugin verzögert oder blockiert werden. Deaktiviere testweise in diesen Plugins:

  • JavaScript-Minify und Combine
  • Defer/Delay von JS-Dateien
  • Lazy Load für Skripte

Leere anschließend Cache und Browserdaten und prüfe erneut die Funktion des Menüs.

5. Test im abgesicherten Modus

Öffne Divi > Support Center und aktiviere den abgesicherten Modus. Dieser deaktiviert alle Plugins und Child-Themes. Wenn das Menü jetzt funktioniert, verursacht eines der Plugins den Fehler. Deaktiviere die Plugins nacheinander, um den Verursacher zu finden.

6. Optional: Zusammenklappbares mobiles Menü erstellen

Wenn du viele Unterseiten hast, kannst du dein mobiles Menü mit einem Pfeil-Symbol erweitern. Füge dafür in Divi > Theme Optionen > Integration > Code in <head> einfügen folgenden Code ein:

<script>
jQuery(function($){
  $(function(){
    $("body ul.et_mobile_menu li.menu-item-has-children")
      .append('<a href="#" class="mobile-toggle-icon"></a>');

    $('ul.et_mobile_menu').on('click', '.mobile-toggle-icon', function(e){
      e.preventDefault();
      var $li = $(this).closest('li');
      $li.toggleClass('mobile-toggle-open');
      $li.children('ul.sub-menu').first().toggleClass('visible');
    });

    $('body ul.et_mobile_menu li.menu-item-has-children')
      .attr('data-icon','P');
  });
});
</script>

Und ergänze dazu in den Theme Optionen > Benutzerdefiniertes CSS den folgenden Stil:

/* #### Collapsing Mobile Menu #### */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
  color: #da181f;          /* Icon-Farbe */
  background: #f1f1f1;     /* Hintergrundfarbe */
  top: 10px;
  position: relative;
  font-family: "ETModules";
  content: '\33';          /* Pfeil geschlossen */
  border-radius: 50%;
  padding: 3px;
}
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after {
  content: '\32';          /* Pfeil geöffnet */
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
  width: 44px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  background: transparent;
}
ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}

7. Unterstützung durch den MIKAS Support

Wenn das Menü weiterhin nicht korrekt funktioniert, sende uns bitte eine Nachricht mit deiner Domain, einer kurzen Problembeschreibung und Angabe deines Themes an hello@mikas.at. Wir prüfen die Konfiguration direkt auf deinem Server und helfen bei der Behebung des Problems.

Fazit

Ein nicht funktionierendes Divi-Mobile-Menü ist fast immer auf CSS-Konflikte oder JS-Optimierung zurückzuführen. Mit den oben genannten Schritten kannst du das Problem in wenigen Minuten selbst beheben. Bei Bedarf helfen wir dir auch direkt über den Support weiter – einfach und schnell.

 0 0