Menülinks im Divi-Theme stylen

22. Januar 2023 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 928 Wörter. Geschätzte Lesezeit: ca. 5 Minuten.

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

 

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