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 gestalten Sie das Divi Mobile-Menü – Anleitung & CSS-Tipps

Das mobile Menü ist eines der wichtigsten Elemente im Divi-Theme, da es über 70 % aller Besucher zuerst auf mobilen Geräten sehen. In diesem Schritt-für-Schritt-Tutorial erfährst du, wie du das Divi Mobile-Menü optisch und funktional anpasst – sowohl im Standard-Divi-Menü als auch im Theme Builder.

  • So passt du das Standardmenü von Divi Mobile an
  • So passt du das Divi Mobile-Menü im Theme Builder an

1. Das Standardmenü von Divi Mobile anpassen

Wenn du das standardmäßige Menü des Divi-Themes verwendest (also kein eigenes Menü über den Theme Builder erstellt hast), findest du die grundlegenden Anpassungen im WordPress-Customizer.
Gehe zu: Divi > Theme Customizer > Mobile Styles > Mobile Menu

Dort kannst du Textfarben, Hintergrundfarben und Logo-Optionen einstellen. Einige Anpassungen – wie das Hamburger-Symbol oder die Schriftgröße – erfordern zusätzliches CSS. Nachfolgend findest du die passenden Snippets.

2. Textfarbe des Divi Mobile-Menüs ändern

Unter Theme Customizer > Mobile Styles > Mobile Menu kannst du direkt die Textfarbe anpassen.
Wenn du jedoch feststellst, dass sich gleichzeitig das Hamburger-Symbol mitändert, musst du es separat anpassen.

3. Farbe des Hamburger-Symbols ändern

Um die Farbe des mobilen Menüsymbols (Hamburger-Icon) unabhängig vom Text zu steuern, füge in Divi > Theme Optionen > Benutzerdefiniertes CSS folgenden Code ein:

/* Hamburger-Icon Farbe ändern */
.mobile_menu_bar:before {
  color: #000000; /* Schwarz */
}

Ersetze den Farbcode durch deinen gewünschten Farbwert (z. B. #ffffff für Weiß oder #e04b00 für MIKAS-Orange).

4. Schriftgröße im mobilen Menü ändern

Auch die Schriftgröße lässt sich einfach per CSS anpassen. Verwende dieses Snippet, um die Lesbarkeit auf Smartphones zu verbessern:

/* Schriftgröße für mobile Menüpunkte */
.et_mobile_menu li a {
  font-size: 15px;
}

5. Hintergrundfarbe des mobilen Menüs anpassen

Um die Hintergrundfarbe des Menüs selbst zu ändern, gehe zu Theme Customizer > Mobile Styles > Mobile Menu und wähle eine passende Farbe.
Wenn sich dabei jedoch auch die obere Leiste einfärbt, kannst du den Header separat anpassen:

/* Hintergrundfarbe der mobilen Kopfzeile */
@media only screen and (max-width: 980px) {
  #main-header {
    background-color: #ffffff; /* Weiß */
  }
}

6. Logo im mobilen Menü ausblenden

Wenn du möchtest, dass dein Logo auf mobilen Geräten nicht angezeigt wird, kannst du dies ebenfalls im Customizer steuern.
Gehe zu Divi > Theme Customizer > Mobile Styles > Mobile Menu und aktiviere die Option „Logo-Bild ausblenden“.

7. Das mobile Menü im Theme Builder anpassen

Wenn du einen Global Header über den Theme Builder nutzt, kannst du das Menü direkt über das Menümodul anpassen:

  1. Gehe zu Divi > Theme Builder > Global Header
  2. Öffne dein Menümodul
  3. Wechsle zur Registerkarte Design

8. Mobile Textanpassungen im Theme Builder

Unter Menütext kannst du für mobile Geräte alle wichtigen Eigenschaften individuell festlegen – z. B.:

  • Aktive Linkfarbe
  • Menüschriftart
  • Textfarbe
  • Textgröße
  • Buchstabenabstand
  • Zeilenhöhe
  • Textschatten

Wechsle einfach im Editor auf das Smartphone-Symbol, um die mobile Ansicht anzupassen.

9. Hintergrundfarbe des mobilen Menüs (Theme Builder)

Um die Hintergrundfarbe des aufklappenden Menüs im Theme Builder zu ändern, gehe im Menümodul auf Dropdown-Menü.
Dort kannst du die Hintergrundfarbe, den Rahmen und die Schatteneffekte einstellen.

10. Hamburger-Symbol anpassen

Unter Symbole kannst du Farbe, Größe und Stil des Hamburger-Symbols direkt anpassen – ohne zusätzlichen Code.
So stellst du sicher, dass das Symbol im Corporate Design deiner Website erscheint.

11. Mobile Logo-Größe anpassen

Wenn dein Logo auf mobilen Geräten zu groß erscheint, kannst du unter Größe > Maximale Breite des Logos im Menümodul den Wert für Mobilgeräte reduzieren:

/* Logo-Größe auf mobilen Geräten begrenzen */
@media only screen and (max-width: 980px) {
  .et_header_style_left #logo {
    max-width: 140px;
  }
}

Fazit

Mit wenigen CSS-Anpassungen und den richtigen Theme Builder-Einstellungen kannst du das mobile Menü in Divi vollständig an dein Design anpassen.
Ein gut gestaltetes Menü verbessert nicht nur die Benutzerfreundlichkeit, sondern stärkt auch die Markenwahrnehmung.
Wenn du Unterstützung bei der individuellen Anpassung benötigst, melde dich gerne unter hello@mikas.at.

 0 0