Lesefortschritt:

Mobiles Menü im Divi-Theme über gesamte Breite laufen lassen

29. Januar 2023 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 371 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Standardmässig legt das Divi-Theme beim Menu für die Mobilansicht links und rechts noch einen Rand fest. Besonders bei längeren Wörtern in der Navigation kann das in der schmalen Mobilansicht suboptimal sein. Mit wenig CSS-Code lässt sich die gesamte Breite nutzen.

Den untenstehenden Code fügen Sie ganz einfach in das CSS-Styleheet Ihres Child-Themes ein. Sei finden das entsprechende Eingabefenster unter Design/Customizer/Zusätzliches CSS:
.et_mobile_menu {
 width: 100vw !important;
 margin-left: -12.5%;
}

So einfach! Testen Sie nun das Resultat.

In vielen Situationen passt der obige linke Rand (wie er in Zeile 3 steht) gut. Ab und an muss der Wert aber noch etwas angepasst werden, damit das Menü ansprechend dargestellt wird.

Auch die gesamte Anzeigehöhe lässt sich mit dem Mobilmenü ausfüllen. Mehr dazu in unserem Trick «Mobilmenü auf gesamter Seitenhöhe anzeigen».

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