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

Header - DIVI Quick Fixes, Divi Quick Fixes | 0 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!

0 Kommentare

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

Disclaimer

Divi ist eine eingetragene Marke von Elegant Themes, Inc. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von von diesen unterstützt.

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

*Affiliate Link Hinweise

Alle mit einem * (Stern) versehenen Links sind Affiliate Links, das bedeutet, dass wir im Falle eines Kaufs eine Provision erhalten. Das hat allerdings keinerlei Auswirkungen auf unsere Bewertung der Plugins und verursacht für dich keine Mehrkosten!