Aktiven Menüpunkt mit CSS farblich hervorheben

tomislav · 28. Februar 2020

Hallo zusammen,

ich nutze das Helix 3 Template und würde gerne einen aktiven Menüpunkt farblich hervorheben, um dem Benutzer die Navigation zu erleichtern. Ich vermute, dass es irgendwie über CSS funktioniert, aber habe noch nicht die richtige Lösung gefunden.

Nur die Schrift soll farblich abgehoben sein, kein Hintergrund o.Ä.

Link zur Seite: https://maler-spiess.de/

Vielen Dank im Voraus!

LG

tomislav

DirtyWorld · 28. Februar 2020

Hi,

ich kenn mich mit dem Helix jetzt nicht aus aber auf Deiner Seite wird.sp-megamenu-parent >li durch #sp-header a überschrieben.
Das wird im head bei Dir deklariert heißt es ist durch irgendeine Einstellung im helix dort wahrscheinlich reingeschrieben worden.
Auch hat es eine höhere Spezifität wegen Verwednung der ID.

Die normale .active Klasse steht in der preset.css. Ich würde aber Anpassungen in eine eigene template.css oder ähnliches auslagern.

Grüße

christine2 · 28. Februar 2020

Hallo tomislav,

Versuche es damit (in die custom.css):

CSS

.sp-megamenu-parent > li.active > a {
 color: orange !important; 
}

(Das !important; brauchst vielleicht nicht, ging bei mir (temporär) nicht anders, weils irgendwo hartcodiert)

Liebe Grüße

Christine

tomislav · 28. Februar 2020

Vielen Dank für eure Antworten!

ChristineT: Dein Lösungsvorschlag funktioniert einwandfrei

Nochmals danke und ein schönes Wochenende!

tomislav

tomislav · 28. Februar 2020

Habe doch noch eine Frage: Wie kann ich die farbliche Hevorhebung auch im Footermenü umsetzen? Habe ein bisschen rumprobiert, aber es noch nicht hinbekommen.

Danke schon mal!

tomislav

Harmageddon · 28. Februar 2020

Code

#sp-footer li.active > a {
  color: orange;
}

tomislav · 28. Februar 2020

Zitat von Harmageddon
Code
#sp-footer li.active > a {
  color: orange;
}

Hi Harmageddon,

funktioniert einwandfrei. Hatte wohl irgendeinen Fehler drin.

Vielen Dank!