Das mobile Menü bekommt im Divi Framework oft am wenigsten Aufmerksamkeit. Logo und Links kommen in den Header, auf dem Handy erscheint das Hamburger-Symbol, und damit gilt die Sache als erledigt. Auf vielen Websites kommt aber der Großteil der Besucher mit dem Smartphone. Für sie ist das mobile Menü die Navigation.
Ein ungestaltetes Standardmenü mit winzigen Links wirkt lieblos. Wer darin nicht findet, was er sucht, ist schnell wieder weg. Ein aufgeräumtes Menü mit gut lesbarer Schrift und großen Tippflächen führt den Besucher dagegen dorthin, wo er hinwill.
Hier geht es nicht darum, im Customizer eine Farbe zu ändern. Ich zeige dir, was mit CSS und dem Divi Theme Builder am mobilen Menü möglich ist: vom Hamburger-Symbol über Slide-in-Effekte bis zum Vollbildmenü.
Standardmenü oder Theme Builder
Bevor du Code einfügst, entscheidest du, womit du arbeitest: mit dem Standard-Header von Divi oder mit einem eigenen Header aus dem Divi Theme Builder. Beides funktioniert, die Werkzeuge sind aber ganz verschieden.
Weg 1: Das Standardmenü von Divi
Wenn du in Divi eine neue Seite erstellst, ist der Standard-Header bereits aktiv. Die Einstellungen findest du im WordPress Customizer (Divi > Theme Customizer). Farben und einfache Typografie sind dort schnell geändert. Für alles Weitere brauchst du eigenes CSS. Auf Layout, Animation und Aufbau des Menüs hast du keinen Einfluss. Zusätzliche Elemente wie Buttons, Symbole oder eine Suche bekommst du nur über Eingriffe in die header.php, und davon rate ich ab. Für eine sehr einfache Website reicht der Customizer. Für mehr nicht.
Weg 2: Der Divi Theme Builder
Mit dem Theme Builder arbeitest du heute in Divi-Designs meistens. Du baust einen globalen Header, der auf allen oder nur auf bestimmten Seiten erscheint, und verwendest dafür das Menü-Modul. Das Modul kannst du in jede Spaltenstruktur setzen, mit anderen Modulen kombinieren und bei Abständen, Größen und Position frei einstellen. Änderungen an Farben, Schriften und am Hamburger-Symbol siehst du sofort im visuellen Builder. Fast jede Einstellung lässt sich getrennt für Desktop, Tablet und Handy festlegen. Meine Empfehlung: Nimm den Theme Builder. Die Einarbeitung dauert etwas länger, dafür stößt du später nicht an Grenzen.
Customizer: Mehr aus dem Standardmenü herausholen
Wer beim Standardmenü bleibt, kann die größten Schwächen mit ein paar CSS-Zeilen beheben. Den Code fügst du unter Divi > Theme Optionen > Benutzerdefiniertes CSS ein.
Das Hamburger-Symbol anpassen
Mit diesem Snippet steuerst du Farbe und Größe des Hamburger-Symbols unabhängig vom restlichen Menü:
/* Farbe des Hamburger-Icons ändern */
.mobile_menu_bar:before {
color: #e8630a; /* MIKAS Orange */
}
/* Größe des Hamburger-Icons anpassen */
.mobile_menu_bar:before {
font-size: 32px !important; /* Größer und präsenter */
}Größere Schrift im Dropdown-Menü
Die Standardschrift ist auf dem Handy oft zu klein. Das folgende Snippet macht die Menüpunkte lesbarer und vergrößert gleichzeitig die Fläche, die man antippen kann:
/* Schriftgröße und Abstand der mobilen Menüpunkte */
.et_mobile_menu li a {
font-size: 18px;
padding: 15px 10%;
letter-spacing: 1px;
}
/* Farbe des aktiven Links hervorheben */
.et_mobile_menu .current-menu-item > a {
color: #e8630a !important;
}Header-Hintergrund und Menü getrennt einfärben
Änderst du im Customizer die Hintergrundfarbe des mobilen Menüs, ändert sich oft auch die obere Header-Leiste mit. Mit diesem Code trennst du beide Bereiche:
/* Hintergrundfarbe der mobilen Kopfzeile (Header) */
@media only screen and (max-width: 980px) {
#main-header {
background-color: #ffffff !important;
}
.et_mobile_menu {
background-color: #0a2540; /* Dunkelblaues Dropdown */
}
}Das mobile Menü im Theme Builder bauen
Jetzt zum Header aus dem Theme Builder. Geh zu Divi > Theme Builder und erstelle einen neuen globalen Header.
Schritt 1: Die Struktur anlegen
Erstelle eine Sektion mit einer Zeile und wähle eine Spaltenstruktur, die zu deinem Design passt. Üblich ist 1/4 + 3/4: links das Logo als Bild-Modul, rechts das Menü-Modul. Diese Aufteilung lässt sich für die mobile Ansicht später komplett neu einstellen.
Schritt 2: Das Menü-Modul einstellen
Öffne die Einstellungen des Menü-Moduls und wechsle in den Design-Tab. Klick bei jeder Einstellung auf das kleine Smartphone-Symbol, dann gilt der Wert nur für Handys. Unter Dropdown-Menü legst du Textfarbe, Hintergrundfarbe des aufgeklappten Menüs und die Animation fest: Slide Down, Slide Right oder Fade. Slide Right wirkt meistens am ruhigsten. Unter Symbole stellst du Farbe, Größe und Stil des Hamburger-Symbols ein, ganz ohne CSS. Unter Menütext legst du zuerst die Schrift für den Desktop fest und wechselst dann in die mobile Ansicht, um die Schriftgröße für Smartphones anzupassen.
Schritt 3: Das Logo für das Handy verkleinern
Im Bild-Modul deines Logos stellst du unter Design > Größenanpassung die Maximale Breite für die mobile Ansicht separat ein. 120 px bis 150 px sind ein guter Startwert. Ein zu großes Logo nimmt auf dem Handy viel Platz weg und schiebt den Inhalt nach unten.
Im Theme Builder kannst du einen Button einbauen, der nur auf dem Handy sichtbar ist. Setz ein Button-Modul neben dein Menü. Unter
Erweitert > Sichtbarkeit deaktivierst du den Button für Desktop und Tablet. So zeigst du etwa „Jetzt anrufen“ oder „Angebot anfordern“ nur dort, wo ein Anruf mit einem Tipp erledigt ist. Viele Websites verzichten darauf.CSS für ein eigenes mobiles Menü
Wenn dir die Optionen des Moduls nicht reichen, hilft CSS weiter. Auch diesen Code fügst du unter Divi > Theme Optionen > Benutzerdefiniertes CSS ein.
Menü als Vollbild
Ein Vollbildmenü blendet alles andere aus, der Besucher sieht nur noch die Navigation. Dieses Snippet macht aus dem Standard-Dropdown ein Vollbildmenü:
@media (max-width: 980px) {
.et_mobile_menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
padding-top: 80px !important;
overflow-y: auto !important;
}
}Das Hamburger-Symbol animieren
Dass sich das Hamburger-Symbol beim Öffnen in ein X verwandelt, kennt man von vielen Seiten. Fertige CSS-Animationen dafür findest du auf CodePen. In Divi ist das etwas aufwendiger, weil du das Standardsymbol ersetzen musst. Wenn du solche Effekte öfter brauchst, ist ein eigenes Menü-Plugin oft die einfachere Lösung.
Untermenüs auf dem Handy übersichtlich halten
Mit Untermenüs wird das mobile Menü schnell unübersichtlich. Divi klappt Untermenüs standardmäßig als Akkordeon auf, das passt. Die Optik kannst du trotzdem verbessern:
/* Untermenü-Einrückung und Trennlinie */
.et_mobile_menu .sub-menu li a {
padding-left: 25px !important;
font-size: 15px !important;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Pfeil-Icon für Untermenü-Toggle */
.et_mobile_menu .menu-item-has-children > a:after {
content: "›";
float: right;
font-size: 22px;
line-height: 1;
}Was das mobile Menü mit SEO zu tun hat
Google bewertet Websites seit Jahren nach ihrer mobilen Version (Mobile-First Indexing). Links, die nur im Desktop-Menü stehen, fehlen dann in der Version, die Google liest. Achte also darauf, dass das mobile Menü dieselben wichtigen Seiten verlinkt. Und wer sich auf dem Handy nicht zurechtfindet, verlässt die Seite, bevor er eine zweite aufruft. Mehr dazu im Beitrag über Mobile-First-SEO-Faktoren.
Fazit
Ein gutes mobiles Divi-Menü braucht mehr als eine neue Farbe. Das Standardmenü reicht für einfache Seiten. Wer mehr will, baut den Header im Divi Theme Builder und ergänzt dort, wo das Modul nicht weiterkommt, ein paar Zeilen CSS.
Plane beim Gestalten große Tippflächen ein, weil Finger ungenauer sind als ein Mauszeiger, und eine Schrift, die man auf dem Handy ohne Zoomen lesen kann. Teste das Menü danach auf einem echten Smartphone und nicht nur in der Vorschau des Builders.
Wir bauen professionelle WordPress-Websites mit Divi, die auch auf dem Handy gut funktionieren, samt mobilem Menü. Meld dich für ein kostenloses Erstgespräch.
Du willst die Umsetzung lieber abgeben? MIKAS übernimmt Konzept, Technik und Betreuung aus einer Hand. Mehr dazu: WordPress Agentur Salzburg.