Lesefortschritt:

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

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

    Trick # 203 | 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

    Cooler Eselsohren-Effekt im Divi-Theme

    Das Erstellen eines Eselsohr-Effekts auf Ihren Elementen der Divi-Website kann eine ansprechende visuelle Note hinzufügen und den Eindruck erwecken, dass eine Ecke der Seite umgeknickt ist. Geht mit Divi und ein wenig CSS ganz einfach.
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This