BlogbeitragDivi Hamburger-Menü: Breakpoint ändern, ohne dass das Logo verschwindet

Du ziehst dein Browserfenster schmaler, und an einer Stelle sieht dein Divi-Menü kurz vor dem Umbruch komisch aus. Das Menü wird zweizeilig und verschiebt das Layout komplett. Das sieht natürlich nicht so toll aus.

Warum das Divi-Menü erst bei 980 Pixeln umschaltet

Divi bringt einen festen Umschaltpunkt mit. Bis 980 Pixel zeigt das Theme dein normales Menü, darunter den Hamburger. Solange dein Menü kurz ist, passt das gut. Hast du mehr als vier oder fünf Punkte oder eine größere Schrift, wird es im Bereich zwischen 980 und 1100 Pixeln eng. Die Links brechen in die zweite Zeile, das Logo bläht sich auf, der Header wirkt unruhig. Das ist die Zone, in der du den Hamburger lieber früher hättest.

Den Breakpoint fürs Hamburger-Menü ändern

Den Umschaltpunkt verschiebst du mit einer Media Query. Du sagst dem Browser: ab einer bestimmten Breite blende das Desktop-Menü aus und zeig stattdessen den Hamburger. Wenn du dein Menü mit dem Menü-Modul im Theme Builder gebaut hast, sieht das so aus:

@media (min-width: 981px) and (max-width: 1160px) {
  .et_pb_menu .et_pb_menu__menu {
    display: none;
  }
  .et_pb_menu .et_mobile_nav_menu {
    display: flex;
    align-items: center;
    margin: 0 6px;
  }
}

Den Wert 1160 ersetzt du durch die Breite, ab der dein Hamburger erscheinen soll. Das align-items: center hält den Hamburger-Button auf einer Höhe mit dem Logo. Ohne diese Zeile rutscht das Icon gern nach oben in die Ecke.

Wohin mit dem Code

Am saubersten landet das CSS direkt im Menü-Modul: Modul öffnen, Reiter Advanced, Custom CSS, Feld Free Form CSS. Dort arbeitest du mit dem Schlüsselwort selector, das Divi automatisch durch genau dieses Modul ersetzt. So greift dein Code nur an dieser einen Stelle und nirgendwo sonst auf der Seite. Alternativ packst du es unter Design, Customizer, Zusätzliches CSS oder gleich in dein Child-Theme.

Warum das Logo im Zwischenbereich verschwindet

Jetzt der Teil, der mich auf meiner eigenen Seite kurz ratlos gemacht hat. Mit dem Umstieg auf Divi 5 kam diese Baustelle bei mir auf den Tisch. (Über die Migration selbst und meine Erfahrungen habe ich hier geschrieben: Divi 5 Migration). Breakpoint verschoben, Hamburger kam früher, alles gut. Nur: im Bereich zwischen meinem neuen Wert und 980 Pixeln war mein Logo weg. Darunter, im echten Mobil-Bereich, war es wieder da. Man kann so ein fehlendes Logo schlecht ignorieren, das fällt sofort auf.

Der Grund ist die Zone dazwischen. Unter 980 Pixeln zieht Divi sein komplettes Mobil-Paket, inklusive der Darstellung fürs Logo. In dem Streifen zwischen 981 und deinem Wunschwert läuft aber nur dein eigenes CSS, das den Hamburger anschaltet und das Desktop-Menü ausblendet. Divis Mobil-Logik ist hier noch nicht aktiv. Und in diesem Zwischenzustand fällt das Logo raus.

So bleibt das Logo sichtbar

Die Lösung steckt in derselben Media Query. Du erzwingst das Logo genau in diesem Bereich. An den Code von oben hängst du das hier an:

@media (min-width: 981px) and (max-width: 1100px) {
  .et_pb_menu .et_pb_menu__menu {
    display: none;
  }
  .et_pb_menu .et_mobile_nav_menu {
    display: flex;
    align-items: center;
    margin: 0 6px;
  }
  .et_pb_menu .et_pb_menu__logo-wrap,
  .et_pb_menu .et_pb_menu__logo {
    display: block !important;
  }
}

Wichtig ist die Begrenzung der Query auf min-width: 981px. Damit überschreibst du nur den kritischen Streifen und lässt Divi unter 980 in Ruhe seine Arbeit machen.

Ein ehrlicher Hinweis: Die Logo-Klassen .et_pb_menu__logo-wrap und .et_pb_menu__logo sind die Standard-Klassen des Menü-Moduls. Je nach Divi-Version und Aufbau kann dein Logo anders eingebunden sein. Wenn das Logo trotz Code wegbleibt, hilft der Browser-Inspektor: Fenster in den kritischen Bereich ziehen, Rechtsklick auf die Stelle, wo das Logo sein sollte, Untersuchen. Dann siehst du, wie der Logo-Container wirklich heißt und ob eine Regel ihn auf display: none setzt oder auf null Breite zusammenfallen lässt. Bei null Breite nimmst du statt display: block ein width: auto !important.

Einmal alles durchklicken

Bevor du es live schaltest, zieh das Fenster langsam von breit nach schmal und achte auf drei Übergänge. Wo verschwindet das Desktop-Menü, wo kommt der Hamburger, und bleibt das Logo durchgehend stehen.

Wenn du dein Menü neu in Divi 5 mit den Link- und Dropdown-Modulen gebaut hast und nicht mit dem klassischen Menü-Modul, greift dieser CSS-Weg nicht. Dann läuft der Wechsel über die Sichtbarkeit pro Breakpoint und die Interactions. Das ist eine andere Baustelle.

Lieber abgeben?

So ein verschwundenes Logo ist in zehn Minuten gelöst, wenn man weiß, wo es klemmt. Wenn du solche Sachen lieber abgibst und dich auf dein Business konzentrieren willst, übernehme ich das im Rahmen der WordPress-Wartung oder als punktuelle Website-Unterstützung. Schreib mir kurz, wo es bei dir hakt.

Fragen und Antworten zum Divi Breakpoint und dem Hamburger Menü