Highlight Current-Menu-Item

  • Hallo,

    ich versuche nun schon seit einiger Zeit das aktuell angeklickte Menü anders darzustellen. Unzählige Seiten im Internet verweisen auf die CSS-Klassen .current-menu-item bzw. .current_page_item. Jedoch scheinen diese nicht zu funktionieren (am CSS-File an sich liegt es nicht, da andere Änderungen übernommen werden). Am Quelltext (nachstehend) ist jedoch zu erkennen, dass diese Klassen verwendet bzw. automatisch seitens WP hinzugefügt werden.

    Quelltext:

    HTML
    <div class="menu"><ul id="menu-hauptmenu" class=""><li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a ...> Sitemap</a></li> <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a ...> Sitemap</a></li> <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-37"><a ...> Sitemap</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a ...> Sitemap</a></li> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a ...> Sitemap</a></li> </ul></div> </div>

    Die Änderung im CSS-File sieht wie folgt aus:

    Code
    .current-menu-item, .current_page_item {
    color: white;
    display: none !important /* Zu Testzwecken */
    }

    Weiß wer, woran das liegen könnte, dass ausschließlich diese Änderung im CSS-File keine Auswirkung hat (Property background auch getestet, aber ebenfalls ignoriert worden).


    Ich wäre über jegliche Hilfe sehr dankbar!

    Danke u. LG

    • 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

  • Wenn Du relativ adressierst, immer mit !important arbeiten, sonst wird's wieder überschrieben. Zudem bin ich ein Semikolon-Liebhaber - auch am Ende einer Anweisung solltest Du das setzen.

    Ansonsten: no link, no analysis.

  • Danke für die Antworten! Leider kann ich keinen Link zur Verfügung stellen, da sich diese Seite (ausschließlich) im Intranet befindet.

    An was würdet ihr denken bezgl. Problemlösung? - Was würdet ihr zuerst "kontrollieren" bzw. wie vorgehen um das Problem zu lösen?

  • Wähle mal einen Menüpunkt aus und schau dann im Quelltext, welche Class für diesen aktivierten Menüpunkt erzeugt wird.


    HTML
    <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-97 current_page_item menu-item-102"><a href="http://localhost/data/">Daten</a></li>

    Also, die Klassen .current-menu-item, sowie .current_page_item wären vorhanden.

  • .current_page_item a { color: white; }

    oder

    .current_page_item { background-color: white; }

    Das Problem ist, dass genau diese CSS-Anweisungen nicht funktionieren (auch nicht mit !important;) -- somit wird kein Menüpunkt anders dargestellt. Nur weiß ich nicht, warum genau das nicht so funktioniert.

  • Ich habe aber eine andere Anweisung geschrieben, wie du oben.
    .current_page_item [COLOR=#ff0000]a [/COLOR]{ color: white; }

    Leider hat diese Anweisung auch keine Auswirkung.

    Das komische ist ja, dass sämtliche .current_page_item - oder .current-menu-item -styles für das Menü scheinbar ignoriert werden, und auch mittels Firebug nicht angezeigt werden. Jede andere Anweisung wird allerdings übernommen. Ich weiß nicht so recht, wo ich wirklich ansetzen könnte.

Jetzt mitmachen!

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