Current Menu Item farblich hervorheben

Annica

Hallöchen,

ich bin am verzweifeln :(
Ich habe das YOKO theme und möchte gern im Submenü die Items einfärben. Ich bin leider kein CSS-Spezialist und bekomme es alleine nicht hin:(
Vielleicht kann mir ja jemand helfen?

Mein Menü sieht folgendermaßen aus im Quellcode:

HTML

<nav id="mainnav" class="clearfix">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="...">Home</a></li>
            <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-56"><a href=".../bisherige-reisen/">Bisherige Reisen</a>
                <ul class="sub-menu">
                    <li id="menu-item-44" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-44"><a href=".../bisherige-reisen/afrika/">Afrika</a></li>
                    <li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href=.../bisherige-reisen/asien/">Asien</a></li>
                    <li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href=".../bisherige-reisen/europa/">Europa</a></li>
                    <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href=".../bisherige-reisen/nordamerika/">Nordamerika</a></li>
                </ul>
            </li>
            <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href=".../tipps-tricks/">Tipps & Tricks</a></li>
            <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page current-category-parent menu-item-has-children menu-item-85"><a href=".../weltreise/">Weltreise</a>
                <ul class="sub-menu">
                    <li id="menu-item-82" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-82"><a href=".../weltreise/vorbereitungen/">Vorbereitungen</a></li>
                    <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href=".../weltreise/blog/">Blog</a></li>
                </ul>
            </li>
            <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href=".../impressum/">Impressum</a></li>
        </ul>
    </div>        
</nav><!-- end mainnav -->

Alles anzeigen

Dh an sich wird schon richtig im Main-Menu und um Sub-Menu das Current Item erkannt. Das Main-Menu färbe ich mit folgendem CSS Code ein:

HTML

.menu .current_page_item > a, .menu .current_page_parent > a{
    border-color: #F0F0F0;
    border-width: 1px;
    border-style: solid;
}

aber ich bekomme es einfach nicht hin die Items im Sub-Menu sichtbar zu machen...Ich habe folgendes versucht (und noch mehr):

HTML

nav#subnav ul.menu li.current_page_parent ul.sub-menu li.current-menu-item > a{
    color: #E75428;
}

Hat jemand bitte einen Tipp für mich?

Werbepost

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

SirEctor

Versuch es mal mit

Code

.menu ul.sub-menu li.current-menu-item > a {
    color: #f00;
}

Annica

Ich habe gerade festgestellt, dass die Stelle an der es sich auswirken soll diese hier ist:

HTML

<nav id="subnav">
    <div class="menu-menu-reisen-container">
        <ul id="menu-menu-reisen" class="menu">
            <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-52"><a href="http://forum.wpde.org/design/.../bisherige-reisen/afrika/">Afrika</a></li>
            <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://forum.wpde.org/design/.../bisherige-reisen/asien/">Asien</a></li>
            <li id="menu-item-54" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-54"><a href="http://forum.wpde.org/design/.../bisherige-reisen/europa/">Europa</a></li>
            <li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-55"><a href="http://forum.wpde.org/design/.../bisherige-reisen/nordamerika/">Nordamerika</a></li>
        </ul>
    </div>
</nav>

TARCGN

Es ist immer einfacher, Code an einem Live-Beispiel zu testen. Alles andere ist "Fern-Doktorei", da viel zu viele Faktoren einspielen KÖNNTEN.
Also bitte mal einen Link durchschicken, da glaube ich kaum einer der "freiwilligen Helfer" Interesse hat, sich auch noch für ne Demo das Theme zu installieren...

Annica

Ich erprobe meine Seite noch lokal, da ich noch nicht weiß ob ich so hinbekomme und ob es sich lohnt die Seite dann online zu stellen.

Ich habe es jetzt hinbekommen. Ich musste einfach folgendes einfügen:

HTML

.menu .current_page_item > a,
.menu .current_page_parent > a, 
.menu .current-menu-item > a{
    text-decoration: underline;
    color: #777;
}

Dieser Befehl färbt nicht nur die aktuellen Links im Main Menu sondern eben auch im Sub-Menu.
Danke für eure Hilfe.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Current Menu Item farblich hervorheben

Jetzt mitmachen!