Das Menümodul des Divi-Themes bietet schon einige Styling-Möglichkeiten. Um so richtig Chef über die Darstellung zu werden, bedarf es aber ein wenig CSS-Code. Diesen stellen wir Ihnen hier vor.
Zunächst vermerken Sie im Menümodul eine CSS-Klasse: Bearbeiten Sie dazu das Modul, klicken Sie auf «Erweiter» (oder «Advanced», dann auf CSS-ID und Klassen und geben Sie unter «CSS-Klasse» den Text «menu-styling» ein. Speichern Sie das ganze anschliessend.
Nun wechseln Sie (unter Design/Customizer/Zusätzliches CSS) ins CSS-Stylesheet Ihrer Website und fügen Sie dort folgenden Code ein:
.menu-styling .menu-item a {
font-size: 27px;
font-weight: 700;
color: #348227 !important;
border-left: 10px #e2001a solid;
padding-left: 10px;
}
.menu-styling .menu-item a:hover {
color: #9dbd96 !important;
}
.menu-styling .menu-item a:focus {
color: #000000 !important;
}
.menu-styling .et-menu-nav>ul>li.current-menu-item>a {
border-left: 10px #348227 solid;
}
.menu-styling ul li.current-menu-item>ul>li.current-menu-item>a {
/* Hier CSS-Code eingeben */
}Der Code löst einiges aus. Wir erklären ihn hier – Step by Step:
Menülinks stylen (Zeilen 1-7)
Hier wird das Aussehen der Links des betreffenden Menüs grundsätzlich (quasi im Ruhemodus) festgelegt.
In unserem Fall sieht das so aus:
Gehoverte Menülinks stylen (Zeilen 9-11)
Wenn Sie hovern – also den Mauscursor über einen Link bewegen – erhält der Menüpunkt ein anderes Aussehen.
Hier ein helleres grün.
Angeklickte Menülinks stylen (Zeilen 13-15)
Sobald Sie einen Link anklicken kommt die CSS-Pseudoklasse «focus» ins Spiel.
In unserem Fall wird der Menülink während der Ladezeit des Inhalts schwarz.
Aktiven Menülink stylen (Zeilen 17-19)
Der Menülink der Hauptnavigation, welcher zur momentan geladenen Seite gehört, kann ebenfalls gestylt werden.
Hier wird der Akzent des Links von rot auf grün gewechselt.
Aktiven Submenü-Link stylen (Zeilen 21-23)
Wenn Sie zusätzlich Unterpunkte (so genannte Submenüs) in der Navigation führen, können Sie diese ebenfalls sytlen.
Unser Beispiel hat keine Submenüs, darum sind hier auch keine Anweisungen notiert.
Jetzt sind Sie am Zug: Passen Sie den Code nach Belieben an, um Ihr Menü perfekt zu stylen. Da und dort werden Sie mit der Ergänzung «!important» hantieren müssen.
Werbung
Werbung
