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. 

So ändern Sie die Breakpoints des Divi Mobile-Menüs

Standardmäßig wechselt das Divi Theme bei einer Bildschirmbreite von 980 Pixeln in die mobile Navigation. Dieser Breakpoint ist für viele Layouts geeignet – allerdings nicht für alle. Wenn deine Hauptnavigation viele Menüeinträge hat oder dein Logo viel Platz beansprucht, bricht das Menü häufig schon auf größeren Bildschirmen um. In diesem Fall kannst du den Breakpoint ganz einfach anpassen, zum Beispiel auf 1200px oder 1300px.

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du den Divi Mobile-Menü Breakpoint mit wenigen Zeilen CSS änderst – sowohl für das Standardmenü als auch für Menüs, die du im Theme Builder erstellt hast.

1. Warum den Breakpoint anpassen?

Wenn das Menü auf Desktop-Geräten in zwei Zeilen umbricht oder über das Logo läuft, ist das ein klares Zeichen, dass der Wechsel zur mobilen Ansicht zu spät erfolgt. Durch die Anpassung des Breakpoints kannst du bestimmen, ab welcher Bildschirmbreite das Menü in die mobile Darstellung (Hamburger-Menü) umschaltet.

Beispiel:
Standardmäßig wird das mobile Menü bei einer Breite unter 980px aktiviert. Du kannst diesen Wert auf 1300px erhöhen, damit sich das Menü früher umstellt und die Darstellung stabil bleibt.

2. Breakpoint für das Standard-Divi-Menü

Wenn du das Standardmenü von Divi nutzt (ohne Theme Builder), füge das folgende CSS unter
Divi > Theme Optionen > Benutzerdefiniertes CSS ein:

/* ### Mobiler Breakpoint für Standard-Divi-Menü ### */
@media only screen and (max-width: 1300px) {
  #et_mobile_nav_menu {
    display: block;
  }
  #top-menu {
    display: none;
  }
}

Mit diesem Code wird das Standardmenü ab einer Breite von 1300px ausgeblendet, und stattdessen erscheint das mobile Menü. Du kannst den Wert 1300px auf jede gewünschte Bildschirmbreite anpassen – zum Beispiel 1200px oder 1024px.

3. Breakpoint für das Menü im Theme Builder

Wenn du dein Menü über den Divi Theme Builder erstellt hast, funktioniert das Umschalten etwas anders. Verwende in diesem Fall folgendes Snippet:

/* ### Mobiler Breakpoint für Menü im Theme Builder ### */
@media only screen and (max-width: 1300px) {
  .et_pb_menu .et_pb_menu__menu {
    display: none !important;
  }
  .et_mobile_nav_menu {
    display: block !important;
  }
}

Auch hier kannst du den Wert von 1300px beliebig anpassen.
Achte darauf, dass du die !important-Angaben beibehältst – sie stellen sicher, dass dein Code die Standardwerte von Divi überschreibt.

4. Wie du den richtigen Breakpoint findest

Um den optimalen Breakpoint zu ermitteln, öffne deine Website in einem Desktop-Browser und ziehe das Fenster langsam kleiner. Beobachte, ab wann das Menü zu eng oder unlesbar wird. Miss dann die aktuelle Breite (z. B. über die Entwicklerkonsole oder das Browser-Inspektor-Tool) und setze diesen Wert als neue maximale Breite in deinem CSS.

5. Erweiterte Option: Individuelle Breakpoints für Tablet & Mobile

Wenn du feiner unterscheiden möchtest, kannst du unterschiedliche Werte für Tablet- und Smartphone-Ansichten definieren. Beispiel:

/* Menü für Tablet-Ansicht */
@media only screen and (max-width: 1300px) and (min-width: 981px) {
  .et_pb_menu .et_pb_menu__menu {
    display: none !important;
  }
  .et_mobile_nav_menu {
    display: block !important;
  }
}

/* Menü für Smartphone-Ansicht */
@media only screen and (max-width: 980px) {
  .et_pb_menu .et_pb_menu__menu {
    display: none !important;
  }
  .et_mobile_nav_menu {
    display: block !important;
  }
}

So bleibt dein Menü auf größeren Tablets sichtbar, während es auf kleineren Geräten automatisch in das Hamburger-Menü wechselt.

6. Häufige Fehler & Tipps

  • Cache löschen: Nach jeder CSS-Änderung solltest du Browser- und Caching-Plugins leeren.
  • Child-Theme verwenden: Wenn du die Anpassung dauerhaft speichern willst, füge den Code in die style.css deines Child-Themes ein.
  • Testen auf allen Geräten: Prüfe dein Menü auf Desktop, Tablet und Smartphone, um sicherzugehen, dass es korrekt umschaltet.

7. Fazit

Mit nur wenigen Zeilen CSS kannst du den Divi-Breakpoint exakt an dein Layout anpassen. Besonders bei komplexen Menüs oder langen Navigationsleisten sorgt ein früherer Breakpoint (z. B. 1200–1300px) für ein sauberes und professionelles Erscheinungsbild. Wenn du Hilfe bei der optimalen Einstellung oder individuellen CSS-Anpassungen brauchst, erreichst du uns unter hello@mikas.at.

 0 0