DIVI Mobile Menu auf größeren Bildschirmen (und umgekehrt)

Header - DIVI Quick Fixes, Divi Quick Fixes | 3 Kommentare

Standardmäßig setzt schaltet DIVI bei 980px Bildschirmbreite von der normalen Navigation um auf das Hamburger Menu. In manchen Fällen ist es erwünscht schon früher diesen Schritt durchzuführen.

Breakpoint für Mobile Menu ändern

Am einfachsten geht das per Media Query, der folgende Code in eurer Custom CSS hilft euch dabei.
/* Breakpoint Mobile Navigation
1280px geben die Bildschirmbreite an, ab der das Hamburger Icon angezeigt wird und die Standard Navi sowie der Top Header ausgeblendet werden. 
980px ist der Standardwert, jeder Wert darüber ist zulässig.
*/

@media only screen and (max-width: 1280px) {
  #et_mobile_nav_menu {    
    display: block;
  }
  #top-menu-nav, #top-menu, #et_top_search {    
    display: none;
  }
}

Es geht auch umgekehrt: DIVI Mobile Menu erst später anzeigen

Für den umgekehrten Fall gibt es auch eine Lösung. Per Media Query könnt ihr das Mobile Menu z.B. erst ab 479px und darunter (entspricht DIVI Standardbreite für Smartphones)
@media only screen and (max-width:980px) and (min-width:480px) {
/* der erste Wert kann der normale Standardwert sein für Divi, der zweite ein beliebiger kleinerer Wert */
  #top-menu, .fullwidth-menu, nav#top-menu-nav, nav.fullwidth-menu-nav {
    display:block!important;
  }
  #et_mobile_nav_menu, .et_mobile_nav_menu { 
    display: none!important;
  }
}
Der Code hierfür stammt von Divinotes.

Du hast noch kein DIVI Theme? Dann hol dir jetzt das Theme mit 10 - 20% Rabatt!

Was sind eure Erfahrungen und Fragen? Schreibt uns!

3 Kommentare

  1. Danke! Klappt perfekt!

    Antworten
  2. Hallo,
    bei mir funktioniert es leider nicht, hat Du eine Idee, woran das liegen kann?

    Antworten
    • Hallo Jürgen,

      ich hab es gerade mal auf deiner Website getestet, funktioniert wie zu erwarten. Müsste ich mir dann im Detail anschauen, was nicht geht bzw. was genau du gemacht hast.

      Grüße

      Chris

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.

Unsere Divi Plugin Empfehlungen - macht euch das Leben leichter!

~|plug~|font-awesome~|solid

DIVI Header nach Wunsch mit MHMM

~|plug~|font-awesome~|solid

DIVI anpassen bis es nicht mehr geht mit DIVI Hacks

~|plug~|font-awesome~|solid

Blog Darstellung ganz anders mit Divi Blog Extras