Hamburger- oder Standard-Navigation: Breakpoint im Divi-Theme selbst festlegen

3. Oktober 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 3 Minuten.

Im Divi-Theme wechselt die Navigation standardmässig bei 980px Bildschirmbreite auf das Hamburger-Menu. Das ist meist sinnvoll – aber nicht in jedem Fall. Sie können den so genannten «Breakpoint» darum ganz einfach selbst festlegen. Sie übersteuern damit den Divi-Standardwert und bestimmen, wann der Wechsel in der Navigation geschehen soll.

Was Sie für den Trick benötigen, sind ein paar Zeilen CSS-Code. Fügen Sie ihn in das CSS-Stylesheet Ihrer Divi-Website ein. Am besten unter Design/Customizer/zusätzliches CSS:

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

Den Wert der Anzeigenbreite, bei welcher der Wechsel passieren soll, geben Sie in Zeile 1 ein. Im Beispiel oben sind 1280px als Breakpoint angegeben. Bedenken Sie, dass Divi bei 980px ohnehin auf den Hamburger wechselt. Also müsste Ihr Wert grösser als 980px sein.

Es geht auch andersrum

Wenn Sie das Divi-Theme dazu bringen möchten, die Standard-Navigation auch bei Anzeigengrössen kleiner als 980px anzuzeigen, benötigen Sie statt des obigen folgenden CSS-Code. Auch der gehört ins CSS-Stylesheet (unter Design/Customizer/zusätzliches CSS):

@media only screen and (max-width:980px) and (min-width:480px) {
  #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;
  }
}

Wie erwähnt wechselt das Divi-Theme bei 980px Anzeigebreite ohnehin von der Hamburger- auf die Standard-Navigation. Darum können Sie den ersten Wert in Zeile 1 getrost auf 980px belassen. Den zweiten Wert (hier 480px) können Sie nach eigenem Bedürfnis angeben. Einzige Bedingung: Er muss kleiner sein als 980px. Der Wert, den Sie wählen wird der neue Breakpoint: Bei breiteren Anzeigen wird die Standard-Navi angezeigt, bei kleineren das Hamburger-Menü.

Ziemlich simpel. Nicht?

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This