Vertikale Navigation mit dem Divi-Menu-Modul erstellen

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

Geschätzte Lesezeit für diesen Beitrag: ca. 3 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 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») dden 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;
}

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

 

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