Divi Quick-Tip #2 – Hamburger Menus ausschalten

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.

Gif Mobile Navigation Divi

 

Hamburger Menu Ursprung

 

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.

 

Manchmal ist es aus design-technischen Gründen einfach nicht gewollt, dass sich das Menü automatisch als 3 Balken darstellt. Nimm zum Beispiel meine Hauptnavigationsleiste. Sie ist bewusst sehr kurz und übersichtlich gehalten, ohne irgendwelche Unterpunkte und deshalb ist es einfach nicht notwendig, dass sie noch kleiner wird. Vom Style mal ganz abgesehen…

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…

Mobilansicht ohne Hamburger Menu

 

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)

Divi Theme Builder

2. Füge dem Modul unter Advanced/Erweitert die CSS-Klasse „pg-hide-mobile-menu“ hinzu. (Ohne Anführungszeichen).

Theme Builder Global Header

CSS Klasse hinzufügen

3. Dann gehst Du zurück zu DIVI – Theme Options

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!

DiviTheme Options Save

6. Und siehe da! Unser Menü bleibt nun an Ort und Stelle. 🥳

Gif Mobile Navigation Divi

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.

Hier kannst Du weiter lesen…

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Eine Website ist Dein Aushängeschild im World Wide Web. Dort finden Dich Deine Kunden, dort können sie mit Dir Kontakt aufnehmen oder mehr über Dich erfahren. Und genauso wie Deine Visitenkarte sollte sie immer schön gepflegt und brandneu aussehen. Da kann ein...

WordPress QuickTip #1 – Was ist eine XML Sitemap?

WordPress QuickTip #1 – Was ist eine XML Sitemap?

Vielleicht hast Du ihn beim durchforsten Deiner Google Search Console schon einmal gesehen - den Sitemap-Reiter - und Dich, wie bei vielen anderen Funktionen der umfangreichen Search Console, gefragt: "Was zum Geier will ich denn damit?" Deshalb gibt es heute einen...