Lesefortschritt:

Vertikale Navigation mit dem Divi-Menu-Modul erstellen

14. August 2022 | CSS-Stylesheet, Divi-Theme

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

Das Divi-Menümodul verwendet standardmässig das horizontale Layout, das für den Header als horizontale Navigation konzipiert wurde. Aber es gibt bestimmte Situationen (zum Beispiel bei der Erstellung eines Footer- oder Sidebar-Layouts), in denen wir alle Menüpunkte untereinander anzeigen möchten, als einfache Liste von Links, ohne die mobile Hamburger-Menü-Version

Ja – wir könnten hierfür das Textmodul verwenden und unsere Liste von Links manuell hinzufügen. Aber die Verwendung der Word­Press-Menüs bei der Auswahl ist benutzerfreundlicher und eröffnet zusätzliche Möglichkeiten. Das schaffen Sie mit ein paar Zeilen CSS. Damit können Sie das Aussehen des Standard-Menü-Moduls ändern und dessen Inhalt senkrecht darstellen.

Zunächst müssen Sie dem Menu jedoch eine CSS-Klasse zuweisen, um ein bestimmtes Modul und nicht alle Menüs auf der gesamten Website anzusteuern. Öffnen Sie in den Eigenschaften des Menu-Moduls unter «Erweitert» (oder «Advanced») den Punkt «CSS-ID und Klassen» und vergeben Sie als CSS-Klasse etwa «vertical-menu»..

Speichern Sie das ganze und wechseln Sie (unter Design/Customizer/Zusätzliches CSS) in das CSS-Stylesheet Ihrer Word­Press-Installation. Dort fügen Sie folgenden Code ein:

.vertical-menu .et_pb_menu_inner_container,
.vertical-menu .et_pb_menu__wrap,
.vertical-menu .et_pb_menu__menu,
.vertical-menu.et_pb_menu .et_pb_menu__menu>nav,
.vertical-menu.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: block;
}

.vertical-menu .et_mobile_nav_menu {
    display: none;
}
Das entsprechende Menu wird nun vertikal angezeigt, während es an anderen Stellen der Website (etwa im Header) nach wie vor horizontal ausgerichtet ist.

Werbung

Werbung

 

Pin It on Pinterest

Share This