Active Link Class color is not changing

I Need Help
1

Hi All,

I’ve made a menu, styled it with color and hover-color. All working fine.

Now I’ve setup an active link class (called it active-page-link) and added it to the project settings. The only thing i’ve changed is the color of the font. But it’s not working.

I’ve tried changing the font into italic, that’s working. Change it to another font is working. But I can’t change the color. So I inspected the item and it shows the class but with the color printed in ‘strike through’ font.

Any thoughts on this from the community?

Grtz, Piet

2

Hey Piet, welcome to the forums.

Do you have the site uploaded anywhere so we can take a look?

3

Thanks Pumpkin.

Not yet, this is still a ‘fooling around’ website (actually, the great course from Eldar). But I can upload it to a subdomain.

I’ll get back with the link.

4

https://1.tomster.tv/

5

Same happening with me on a site I’m working on.
Italic and underline are working, but not the colour change

6

Is this site not working locally or when published on a server?

7

You seem to have set a color for the nav items with two classes already, which messes it up and overrides your active class:

Screenshot 2023-01-09 at 16.20.33
Screenshot 2023-01-09 at 16.20.331920×687 117 KB

As soon as I deactivate those two rules, the green comes alive. Did you use the inspector on the right to set a color for the nav items somewhere? And you seem to have set another color for the nav items using the class .navbar-nav li a.

Might want to check those.

8

It’s locally Dave. Just getting the bones of the site together to start with.

9

That’s exactly what I saw as well…

For some reason the ltc class is added. I didn’t do that. I saw that first locally. Changed some stuff and then the ltc class disappeared again.

On the li a class there should be a color set. So it can change with the active class.

10

Problem is still there after I published the site.

11

It seems as though the navigation link colour (set in Project Settings) is over-riding the .active-page-link for me.
As soon as I put a colour back in, the active one disappears again. So at the moment it’s defaulted to grey text, black on hover and the chosen colour for active page. Any thoughts on what to target to get the colours I’d like for normal/hover etc?

Sorry to hijack your thread @tomster, but it’s the same problem.

12

OK Trevor thought it might be something else related to an issue I have seen when published to servers we both use.

1 Like
13

Those ltc color classes… I’m not 100% sure, but they might get added when you play around with the color settings in the inspector on the right side. I’ve had that problem once and can’t remember how it happened. Might be worth to redo the navigation.

I usually do what @Eldar shows in his videos, set all headings, paragraph and the a tag to the class manager and change the a tag from there. That applies to all links, but I always create a link class that I apply on text links on the page. But that’s my way…

14

Yes - I experience this too.

1 Like
15

Maybe this will be helpful

3 Likes
16

But than it would make a new class…

And that’s exactly what I did. I’m following Eldar along with his Blocs 5 tutorial. Did what he did and it didn’t work :upside_down_face:

17

So .navbar-nav li a might be the culprit here. I never touch that to colour the nav links. @tomster have you checked if you did that?

18

Thanks for replying Eldar! Big fan of your work…

I am in the middle of your new Blocs 5 tutorial and I did exactly what you did (with the active class) but it’s just not working. Also, as you can read above, sometimes it’s adding a ‘ltc’ class which is not in the class manager.

19

Not sure what ‘ltc’ class is, but I just read all of the posts in this thread, and the issue is quite simple: li a class is overriding the active link class style. You can fix this if you watch the tutorial I just posted in this threat above.

Thanks for kinds words, btw :pray:t2:

20

Yes, I colored the nav link there. How would you otherwise color the links in the navbar?

I’ve just checked if removing the color from the .navbar-nav li a class solves the issue, but no. The active class is just not changing the color of the nav link.