Wie man das aktive Menüelement in Divi gestaltet und hervorhebt

von | 30. September 2023 | Tutorials

In diesem Beitrag zeigen wir Euch, wie Ihr mit sehr simplen Mitteln aktiven Links eines Onepagers farbig anpassen könnt. Es bedarf eigentlich keiner großen Erklärung. Hier erst einmal ein Beispiel:

Divi Menü – Anker Menüpunkte farblich hervorheben

Individuelle Menü-Highlights in Divi: Aktive Links auf Onepagern hervorheben

Mit Divi ist sehr viel möglich. Das wissen wir alle unumstritten. Nehmen wir unter anderem das Menü. Dank des Theme-Builders lassen sich tolle und sehr individuelle Lösungen umsetzen. Egal, ob mit dem Theme Builder oder dem Standardmenü von Divi: Aktive Links lassen sich immer farbig hervorheben. Nur was ist mit einer einseitigen Seite? Also einem Onepager? Ich habe für mich eine schnelle und einfach Lösung gesucht und bin auf eine Lösung gestoßen, die sich schnell und einfach umsetzen lässt. Hierzu benötigt Ihr das Plugin Page scroll to id! und ein paar kleine Zeilen Code. Die Vorgehensweise ist sehr simple.

Installiere das Plugin Page scroll to id! und aktiviere es. Weitere Einstellungen sind nicht nötig.

Vergib den Menüpunkten, die als Ankerpunkt die Klasse ps2id.

Füge in Deinem Childtheme oder in den CSS Einstellungen folgenden Code ein:
nav#top-menu-nav ul#top-menu li.menu-item a.mPS2id-highlight {
  color: #000!important; /* Passe hier Deine gewünschte Farbe an */
}

Lösche den Cache den Deines Browsers und freue Dich über das Ergebnis. Viele Grüße Levent

©2019 - Ein Design mit von Divi Mastermind - Benny
Impressum | Datenschutz

Divi ist ein eingetragenes Warenzeichen von Elegant Themes. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von Elegant Themes unterstützt.