[Resolved] Widget – Active Link Color

[John]

Hi:

I’d like to have an active widget link color for a logged-in user.

This is what I’ve tried but it’s not working.

body.logged-in .sidebar .widget ul li a:active {
    color: green;
    font-weight: bold;
} 

Thanks!

[Leo]

Hi there,

That looks good as long as the link is in a list.

Can you link me to the page in question?

[John]

Thanks, Leo

You will have to log-in

LOGIN URL removed by author
user: removed by author
pass: removed by author

[Leo]

I’m seeing the CSS applied correctly:
https://www.screencast.com/t/A0Mz5QJnY

What is the issue?

[John]

I’m not seeing the link in the sidebar (Monthly Events) reflecting the CSS (Green and bold)

SCREENSHOT

I’ve cleared browser and server caches.

[Leo]

Ahh I think I know where the misunderstanding is coming from. :active doesn’t work like that as the menu item.

I believe this is what you want:

body.logged-in .sidebar .widget ul li.current-menu-item a {
    color: #000 !important;
}

[John]

Yes, that worked. Thank you.

How important is !important? If I remove !important it still works. Is it better to leave it in?

I’m curious as to why you check the :active box in Force Element State, in dev tools.

[Leo]

You can remove !important if it still works without it – it didn’t work for me when I tried.

I was just trying to see if your CSS was applying.

[John]

Hi,

I have a follow-up question.

body.logged-in .sidebar .widget ul li.current-menu-item a {
    color: #000 !important;
}

This CSS works for the menu links in the sidebar navigation widget, but it doesn’t work on the categories widget which is directly below it. Can this be modified to include those links in the categories widget?

https://www.leylatorresstudio.com/member-login/

testuser2
stf4nwaozIhB!o95KLGmwhQ(

[Leo]

Try this:

body.logged-in .sidebar .widget ul li.current-menu-item a,
body.logged-in .sidebar .widget ul li.current-cat a {
    color: #000 !important;
}

[John]

That works, Leo. Thank you.

I don’t see where in the inspector you see .widget ul li.current-cat to pinpoint the categories widget. I’m missing something here and I’d like to understand this better.

Can you show me in this screenshot taken before I added your CSS?

https://www.dropbox.com/s/amb9rmlyilw53c1/Screen%20Shot%202020-09-08%20at%2012.02.41%20PM.png?dl=0

[Leo]

So click on the Q&A link and you should see this:
https://postimg.cc/YhJbRmVD

[Author]

Posts