Mit dem Menu-Modul des Divi-Themes lassen sich auch Submenüs darstellen – es gibt aber keine Option, solche Submenüs auch ständig anzuzeigen, wenn die übergeordnete Seite aktiv ist. Mit ein wenig CSS-Code lässt sich aber dies beheben.
Den Trick habe ich übrigens kennengelernt, als eine Kundin von mir auf der dauerhaften Anzeige des Submenus bestanden hat. Eine Knacknuss – aber eine lösbare.
Sie benötigen dafür einige Zeilen CSS-Code, den Sie in das Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS) einfügen. Der Code beinhaltet eine Abfrage der Anzeigegrösse, zumal der Hack nur auf Desktop-Monitoren greifen muss – auf Mobilanzeigen wird das Submenu eh angezeigt:
@media only screen and (min-width: 981px){
.page-id-62 .menu-item-94 .sub-menu, .page-id-88 .menu-item-94 .sub-menu, .page-id-91 .menu-item-94 .sub-menu{
visibility: visible !important;
opacity: 1 !important;
}
.et_pb_menu li ul {
display: inline-flex;
box-shadow: none !important;
}
}Im Code müssen Sie insbesondere die Zeile 2 anpassen. In diesem Beispiel soll das Submenu angezeigt werden auf der Parentseite und ebenfalls auf den beiden Unterseiten. Ein Blick in den Seiten-Quelltext der publizierten Seiten zeigt (bei geöffnetem Submenu), welche IDs diese Seiten haben. In meinem Fall sind das die IDs 62, 88 und 91. Entsprechend sehen Sie im Code die Klassen .page-id-62, .page-id-88 und .page-id-91 angesprochen. Diese Werte werden bei Ihrem Projekt bestimmt anders sein und Sie müssen diese anpassen.
Ebenfalls im Quelltext einer der Seiten sehe ich – beim geöffneten Submenu – dessen ID. In meinem Fall war das die ID 94. Entsprechend wurde auch die Klasse .menu-item-94 je Seite einmal angesprochen. Auch diesen Wert müssen Sie mit demjenigen Ihres Falls ersetzen.
Auf Zeile 8 wird das (normalerweise vertikale) Menu zu einem horizontalen umgestaltet. Und auf Zeile 9 wird der Schatten um die Menubox entfernt.
Weitere Styling-Tricks für das Submenu erfahren Sie übrigens im Beitrag «Submenüs mit CSS stylen» aus der Dr. Code-Reihe «Submenu-Special».
Werbung
Werbung
