Lesefortschritt:

    Menu-Special #9: Dropdown-Menü zentriert ausrichten

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

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

    Das Drop-Down-Menü des Divi-Themes wird normalerweise links ausgerichtet dargestellt. Doch die Menüpunkte lassen sich auch zentrieren. Das geht sowohl im Menümodul als auch im Divi-Standardmenü. Wir zeigen Ihnen die Lösung für beide Varianten.

    Beginnen wir mit dem Divi-Menü-Modul.

    Dropdown-Menü im Menü-Modul des Divi-Themes zentrieren

    Dafür benötigen Sie die folgenden CSS-Zeilen. Fügen Sie diese in das CSS-Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:

    .et-menu-nav li ul.sub-menu {
    left: 50%!important;
    right: auto!important;
    text-align: center!important;
    transform: translate(-50%, 0)!important;
    }

    Das war auch schon der ganze Zauber.

    Wenn Sie ihre Navigation jedoch nicht mit dem Menü-Modul sondern mit dem Standard-Menü darstellen, kommt eine andere Lösung zu Zug.

    Dropdown-Menü im Standardmenü des Divi-Themes zentrieren

    Auch für das Standard-Menü gibt es einen CSS-Block. Einfach unter Design/Costumizer/Zusätzliches CSS ins Stylesheet einbinden:

    #main-header .nav li ul {
    left: 50%!important;
    right: auto!important;
    text-align: center!important;
    transform: translate(-50%, 0)!important;
    }

    Und … gut ist. That easy!

    Werbung

    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This
    Überblick über den Datenschutz

    Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.