Lesefortschritt:

Menu-Special #11: Mehrzeilige Anzeige des Divi-Menüs verhindern

21. Juli 2024 | CSS-Stylesheet, Divi-Theme

Trick # 363 | Dieser Beitrag beinhaltet 361 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Je nach Grösse Ihrer Anzeige und je nach Umfang des Menüs Ihrer Website kann es vorkommen, dass das Menü auf kleineren Monitoren zweizeilig dargestellt wird. Das ist natürlich unschön und wir versuchen es zu verhindern. Hier ein Hack, der helfen kann und eine Reihe von weiteren einfachen Lösungsideen.

Eine Variante ist es, den Abstand zwischen den Menülinks etwas zu verringern. Im folgenden Beispiel legen wir ihn jeweils links und rechts mal auf 6 Pixel fest.

Den Code können Sie kopieren und das Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen:

.et_pb_menu .et-menu > li {
    padding-right: 6px;
    padding-left: 6px;
}

Vielleicht hilft sowas schon?

Ansonsten können Sie die Schriftgrösse des Menüs verringern. Auch das hilft ein wenig. Ebenso sind kurze Bezeichnungen im Menü hilfreich, wenn Sie unansehnliche doppelstöckige Menüs verhindern wollen.

Eine weitere Möglichkeit ist es, zu überlegen, ob ein allfälliger «Home»-Link im Menü vonnöten ist? Denken Sie daran: vermutlich haben Sie neben dem Menü ohnehin noch ein auf die Hauptseite verlinktes Logo platziert. A propos Logo: wenn Sie dieses verkleinert darstellen, bleibt ebenfalls mehr Platz für das Menü.

Und letztlich lässt sich das Hamburger-Menü, welches auf Mobilgeräten erscheint, auch auf grösseren Monitoren anzuzeigen. Wie das geht, erfahren Sie im Tipp «Hamburger- oder Standard-Navigation: Breakpoint im Divi-Theme selbst festlegen».

Werbung

Header des Divi-Themes ausblenden

Das Divi-Theme blendet von Haus aus einen Header ein. Darin erscheint etwa das Menu und zusätzlich noch ein Logo. Ab und an möchte man aber diesen Standard-Header vollständig ausblenden - etwa auch, um ihn zu ersetzen. Wie das geht, zeigen wir ...

Werbung

 

Pin It on Pinterest

Share This