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

Header - DIVI Quick Fixes, Divi Quick Fixes

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!

Unsere Divi Plugin Empfehlungen - macht euch das Leben leichter!

DIVI Header nach Wunsch mit MHMM

DIVI anpassen bis es nicht mehr geht mit DIVI Hacks

Blog Darstellung ganz anders mit Divi Blog Extras