Current anchor link color

[Minna]

I have some anchor links to certain sections to my site, and when on the page with the anchor link, the link of that section in the footer gets active. I can’t find a way to set the active link color in the footer link to anything else…

[ruenel]

Hello @Minna,

Thanks for writing in!

The current link anchor color is also the same as the hover link color.

If you want to override this, you may need to use custom CSS. Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

In your case, your links is having this code:

.m3wf-18.x-anchor:hover .x-anchor-text-primary, .m3wf-18.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m3wf-18.x-anchor .x-anchor-text-primary {
    color: #e92b6e;
}

which means that if you override, you can copy one of the class selectors above like this:

.m3wf-18.x-anchor[class*="active"] .x-anchor-text-primary{
    color: #000 !important;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[Minna]

Thank you!! That active code overrode the hover link color too, so if anyone else is looking into this aswell, this code fixed both the active link, and hover colors as wished:

.m3wf-18.x-anchor[class*=“active”] .x-anchor-text-primary{
color: #000 !important;
}

.m3wf-18.x-anchor:hover .x-anchor-text-primary{
color: #e92b6e !important;
}

[christian]

Glad to hear that, @Minna. Please just note that the use of generated classes like m3wf-18 is not recommended to be used as your selectors as they can change. It’s best that you use your own classes.