• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS: focus nach before

satriani

Neues Mitglied
Hallo liebe Leute,
ich bearbeite ein Menu aus einem WP Theme, das so aussieht:

5196

und hier der Code:
CSS:
#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li.current-menu-item:nth-child(1n) > a:before,
#masthead .right-menu li:nth-child(1n):before,
#masthead .right-menu ul > li:nth-child(1n):hover > a,
#masthead .right-menu ul > li:nth-child(1n) > a:before {
color: #808080 ;
}

#masthead .right-menu li:nth-child(1n):before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #fd0000 ;
}

Das Ziel ist, nur das geklickte Element soll sich rot färben, sprich Text und das fa-Icon sollen sich rot färben.
Bis jetzt funktioniert das nur mit dem Text, leider nicht mit den fa-Icons, die färben sich alle rot, egal ob geklickt oder nicht :(
Ich habe den entsprechenden Code Part wie folgt geädert, leider ohne Erfolg.

#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li:nth-child(1n):before > a:focus,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #fd0000 ;
}

Bitte um Rat und danke im Voraus.
 
Werbung:
Ja, natürlich. Danke für die Antwort.
HTML:
<nav class="main-navigation right-menu">
    <ul id="menu-right-header-menu" class="menu nav-menu">
        <li id="menu-item-172" class="fa-th-large menu-item menu-item-type-custom menu-item-object-custom menu-item-172"><a href="#Behandlungsfelder" data-ps2id-api="true">Behandlungsfelder</a></li>
        <li id="menu-item-173" class="fa-comments menu-item menu-item-type-custom menu-item-object-custom menu-item-173"><a href="#Unterstützte-Kommunikation" data-ps2id-api="true">Unterstützte<br/>Kommunikation</a></li>
        <li id="menu-item-174" class="fa-users menu-item menu-item-type-custom menu-item-object-custom menu-item-174"><a href="#Team" data-ps2id-api="true">Team</a></li>
        <li id="menu-item-175" class="fa-book menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-175"><a href="#Publikationen" data-ps2id-api="true">Publikationen</a></li>
        <li id="menu-item-99" class="fa-graduation-cap menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-99"><a href="#Fortbildungen-und-Workshops" data-ps2id-api="true">Fortbildungen<br/>und<br/>Workshops</a></li>
        <li id="menu-item-100" class="fa-calendar menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-100"><a href="#Termin" data-ps2id-api="true">Termin</a></li>
        <li id="menu-item-101" class="fa-map menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-101"><a href="#So-finden-Sie-uns" data-ps2id-api="true">So finden Sie uns</a></li>
        <li id="menu-item-102" class="fa-envelope menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-102"><a href="#Kontakt" data-ps2id-api="true">Kontakt</a></li>
    </ul>
</nav>

So sieht das Ergebnis aus:

Peek-2019-08-11-01-46.gif
 
Zuletzt bearbeitet:
Werbung:
Hast du das zufäliger weise schon Online ?
Ich komme ohne die komplette Css da nicht weiter.(und abschreiben bin ich zu faul)
Vieleicht kann das auch wer anders mit den jetzigen angaben machen ,doch ich bin geradezu blöd dazu.
 
Hast du ein Child-Theme angelegt? Wenn nicht, hast du spätestens ein Problem, wenn ein Update des Themes ansteht, denn dann werden deine Änderungen in der CSS wieder überschrieben. Und alles im Custom-CSS einzutragen ist nicht gerade schön.
 
Werbung:
OK, durch folgende Änderung habe ich zumindest den gewünschten Effekt, wenn man mit der Maus drüberfährt
#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li:nth-child(1n):hover:before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #ff0000 ;
}
Und so sieht das ganze dann aus:
5200
Wie erreiche ich es jetzt, dass der geklickte Element gefärbt bleibt?
 
Such dir was aus ,

Klasse setzen,
Get Link,
Cookie,
localStorage.

Man müßte aber auch wissen ob du ein Seite hast wo alles über Ajax nachgeladen wird , oder ob du auf einen anderen Link geleitet wirst beim Menü klicken?.

Du möchtest doch bestimmt das wenn man auf Home klickt, das der Link Home dann auf der Home Seite eine andere Farbe hat ?
Du könntest auch für jede Seite die Css ändern das da der Link eingefärbt ist, doch das ist etwas umständlich , gerade bei vielen Menü Punkten
 
Zuletzt bearbeitet:
Werbung:
OK ich hab's.
So muss es aussehen:
CSS:
#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li.current-menu-item:nth-child(1n):before,
#masthead .right-menu li:nth-child(1n):hover:before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
   color: #ff0000 ;
}
Danke basti1012
 
Zurück
Oben