Divi Hauptmenü mobilen Breakpoint ändern

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.