Ein Hauptmenü mit vielen Menülinks kann schnell dafür sorgen, dass das Hauptmenü auf Laptops und großen Tablets unschön umbricht oder überlappt.
Standardmäßig bricht in Divi das Menü bei einer Bildschirmbreite von 980px um. Mit den nachfolgenden Codeschnipseln kannst du die Divi Menü Breakpoints anpassen und dafür sorgen, dass dein Hauptmenü sauber aussieht.
Je nachdem ob du ein Divi Standard-Hauptmenü über den Theme Customizer aufgebaut hast, oder den Theme Builder für den Aufbau deines Hauptmenüs verwendet hast, musst du einen anderen Code verwenden.
1. Breakpoint für Divi Standard-Navigation ändern
Nutze das nachfolgende Codeschnipsel, wenn du dein Divi Hauptmenü standardmäßig über den Theme Customizer aufgebaut hast:
/* Hauptmenü mobilen Breakpoint ändern */ @media (max-width: 1024px)/* Hier Wert anpassen */ { #et_mobile_nav_menu { display: block !important; } #top-menu { display: none; } }
Englischsprachiger Originalartikel: Fixing your responsive navigation menu in divi von Jason Champagne.
2. Breakpoint für Divi Theme Builder Navigation ändern
Wenn du dein Hauptmenü über den Divi Theme Builder aufgebaut hast, funktioniert der vorherige Code nicht. Du muss dann folgendes Codeschnipsel nutzen:
/* Hauptmenü mobilen Breakpoint ändern */ @media (max-width: 1024px) /* Hier Wert anpassen */ { .et_pb_fullwidth_menu .et_mobile_nav_menu, .et_pb_menu .et_mobile_nav_menu { display: flex; float: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .et_pb_fullwidth_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu { display: none; } .et_pb_fullwidth_menu .et_pb_menu__wrap, .et_pb_menu .et_pb_menu__wrap { justify-content: flex-end; } .et_mobile_menu { list-style-type:none !important; top:100%; } }
Das Codeschnipsel kannst du entweder im Divi Theme Customizer in den Bereich Zusätzliches CSS, oder in das Stylesheet deines Child Themes kopieren.
Hat dir mein Codeschnipsel geholfen? Oder funktioniert etwas nicht? Dann hinterlasse mir unten einfach einen Kommentar.
Danke für die Info. Funktioniert super.
Hallo Hubert,
danke für deinen Kommentar! Freut mich, dass dir das Codeschnipsel weitergeholfen hat!
Viele Grüße,
Tobias
Nach Stunden der Fehlersuche habe ich hier den passenden Code gefunden, er funktioniert einwandfrei…… Vielen Dank
Hallo Achim,
super, freut mich!
Viele Grüße,
Tobias
Danke für den Schnipsel für den Builder. Kannte die „normale“ Variante und bin gerade sehr erleichtert, hier die Lösung gefunden zu haben.
Hallo Uta,
vielen Dank für deinen Kommentar!
Freut mich, dass du fündig geworden bist.
Viele Grüße,
Tobias
Gibt es den breakpoint code auch für die komplette seite oder nur für die navigation?
Hallo Andreia,
leider gibt es den Code nur für die Navigation, nicht für die ganze Seite.
Aber gute Idee… ich schaue mal ob das möglich wäre.
Viele Grüße,
Tobias
Hallo Tobias,
danke für den Code Schnipsel – bei mir klappt es. Eine Ausnahme gibt es allerdings – im Safari funktioniert dies nicht.Da ist das Menü immer noch unschön. Hast du vielleicht eine Idee oder ein Ergänzungscode???
Ich freue mich auf deine Antwort,
Grüße und einen schönen Tag,
Manuela
PS: Nicht wundern, die URL ist noch eine Testumgebung 🙂
Hallo Manuela,
vielen Dank für deinen Kommentar!
Bei mir sieht das Menü gut aus. Es könnte sein, dass du in Safari die Browsercookies löschen musst, damit du auch dort die Änderungen siehst.
Falls du nicht weißt wie das geht, kannst du einfach nach „Safari Browsercookies löschen“ googlen, da bekommst du eine einfache Anleitung 😉
Lass mich kurz wissen, ob es geklappt hat.
Viele Grüße,
Tobias
Hallo Tobias,
danke für Deinen Code-Schnipsel. Es funktioniert leider nicht bei mir 🙁
Gruß
Armin
Hallo Armin,
wo hast du das Codeschnipsel denn hinkopiert? In den Custom CSS-Bereich von Divi? Oder in dein Child-Theme?
Versuch auch mal mit dem Wert 1024px zu spielen. Es kann sein, dass du den Wert erhöhen musst (z.B. auf 1400px), damit eine Änderung sichtbar wird.
Viele Grüße,
Tobias
Hallo Tobia,
im Custom CSS Bereich.
Er bleibt unverrückbar bei 980px. Da kann ich eingeben was ich will. Keine Chance.
Danke für Deine Hilfe.
Gruß
Armin
Hallo Armin,
ich habe das Codeschnipsel gerade nochmal getestet… bei mir klappts ohne Probleme. Vielleicht überschreibt irgendetwas anderes den Code.
Hast du die Möglichkeit mir einen Link zur besagten Seite per PN zukommen zu lassen? Meine Kontaktinfos findest du hier.
Viele Grüße,
Tobias