Sidebar Navigation farblich gestalten

    Ich habe in einer Sidebar eine Navigationsleiste eingebaut und möchte, dass die Navigationspunkte farblich gestaltet werden. Der Hoverlink wird angezeigt, ich möchte nun aber auch, dass der aktive Link eine Farbe hat. Ich finde nur nicht die Datei, wo ich das einstellen kann. Nach allem was ich bisher verfolge kann ich das über "Element untersuchen" feststellen, aber ich find das halt nicht. Es geht um diese Seite.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Ok, habe ich gefunden. Aber was muss ich in zusätzliches CSS eintragen? Ich habs damit versucht:

    Code
    .li.current_page_item  a.active
{
color: #e02b20;
}

    und auch damit

    Code
    .id menu-christl a:active
{
color: #e02b20;
}

    :mad::eek:

    li.current_page_item ist bereits der aktive Menüpunkt (also der Menüpunkt, der zur aktuellen Seite gehört).

    Es sollte also eigentlich so gegen:

    Code
    li.current_page_item  a
{
color: #e02b20;
}

    Wichtig: Vor dem li keinen Punkt!

    Falls das nicht funktioniert, mit !important probieren.

    PS: Ich kann es leider gerade nicht testen, weil nur mobil unterwegs. Insofern ist das jetzt blind "hergeleitet". Falls das nicht klappt, kann ich aber gern morgen mal konkret im richtigen Browser schauen (falls das bis dahin nicht schon jemand anders gemacht hat) :)

    So, jetzt der versprochene Nachtrag:

    Die o.g. Regel funktioniert, aber nur mit einem !important. Also so:

    CSS
    li.current_page_item  a
{
color: #e02b20 !important;
}

    Alternativ kannst du auch die Regel etwas weiter einschränken (was ohnehin sinnvoll ist, damit du nicht aus versehen andere Elemente bzw. Menüs auf der Seite "miterwischst").

    Das könnte dann z.B. so aussehen (und funktioniert dann auch ohne !important):

    CSS
    div.et_pb_widget.widget_nav_menu li.current_page_item a 
{
color: #e02b20 !important;
}

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden