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 WordPress-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 WordPress-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;
}Werbung
Werbung
