Der erste DIVI Quick-Tip ist tatsächlich schon ein bisschen her, aber da das Format so gut ankam, dachte ich, wir könnten die Reihe wieder aufleben lassen.
Heute soll es also um Hamburger Menüs gehen – und nein, ich rede nicht von Big M*cs and Doppelten Cheeseburgern, sondern von den 3 kleinen horizontalen Balken, in die sich Deine Navigationsleiste verwandelt, wenn Du von der Desktop-Ansicht auf mobile Größen wechselst. Im GIF siehst Du einmal, was genau ich meine.
Warum heißt es Hamburger Menü?
Der Begriff Hamburger Menü oder „Burger Menu“ besteht tatsächlich schon seit 1981 und wurde vom Designer Norm Cox geprägt. Die Erklärung ist ganz einfach: das Icon sieht aus, wie ein Hamburger. Brötchen, Belag und nochmal Brötchen.
Die Ähnlichkeit ist ja wohl kaum zu leugnen😉
Sinn und Zweck eines Hamburger Menüs
Von der kuriosen Namensgebung mal abgesehen, ist das Hamburger Menü eine recht nützliche Sache. Es spart auf kleinen Bildschirmen viel wertvollen Platz und gibt Deinen Website-Besuchern trotzdem die Möglichkeit, schnell über Deine Seite zu navigieren.
Und bei meinem Lieblings-DIVI-Builder ist es natürlich auch direkt eingebaut, dass sich das Menü automatisch ab einer gewissen Bildschirmgröße in einen Hamburger verwandelt. Praktischer geht’s doch kaum, oder? Oder?
Was passiert aber, wenn ich kein Hamburger Menü haben will? Wenn ich gar kein Burger-Fan bin? Ok, ich hör auf mit den schlechten Wortspielen.
Aber auch, wenn Du zum Beispiel die rechtlichen Links als Menü in den Fußbereich einbauen willst, dann sollen die in der mobilen Ansicht sichtbar bleiben und sich nicht in drei kaum bemerkbare Striche verwandeln.
Jetzt also Butter bei die Fische…
Wie verhindere ich das automatische Wechseln in ein Hamburger Menü in Divi?
Wie Du das mobile Menü in Divi ganz einfach versteckst, das zeige ich Dir jetzt. Wichtig dafür ist es, dass Deine Navigationsleiste im Theme Builder gebaut ist und nicht das Standard Menü von Divi. Dazu brauchen wir nur ein kleines bisschen CSS.
Denk daran, vor jeder größeren Änderung an Deiner Website ein Backup zu machen!
1.Gehe in den Divi Theme Builder und bearbeite Deinen globalen Header (oder das Modul in dem das fragliche Menü sitzt)
2. Füge dem Modul unter Advanced/Erweitert die CSS-Klasse „pg-hide-mobile-menu“ hinzu. (Ohne Anführungszeichen).
3. Dann gehst Du zurück zu DIVI – Theme Options
4. Und fügst dort bei Custom CSS den folgenden Code ein:
.pg-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.pg-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
display: flex!important;
}
.pg-hide-mobile-menu .et_mobile_nav_menu {
display: none;
}
5. Speichern nicht vergessen!
6. Und siehe da! Unser Menü bleibt nun an Ort und Stelle. 🥳
Ich hoffe, das hat Dir geholfen, Deine Website mit Divi noch mehr an Deine eigenen Bedürfnisse anzupassen. Falls Du Fragen hast oder irgendwo Hilfe benötigst, dann schreib mir hier gerne eine Nachricht.
