Change colour of INACTIVE links on hover - DAWN THEME

[Melinda5]

Hello,

I have found a lot of discussions on changing the colour of links on hover, however I haven’t found one to suit this particular situation. I am trying to change the colour of the texts of the INACTIVE links on hover for the header and footer.

For example, this menu base text colour is black.

But, on hover the active link remains black and the inactive ones turn gray.

I was able to do this reversed (gray on active hover links), however I cant seem to figure out how to change the code to get it this way. The code I was using is was just a custom CSS code in the website editor (header section):

a:hover {
color: lightgray;
}

Here is website https://snp5fxjhqqy4h7hg-26499285045.shopifypreview.com

Hoping I can get some help! I’ve seen you guys post similar replies and hoping you can provide guidance on this as the solutions I came across did not work for me. @GabrielS @KetanKumar @PageFly-Victor @ZestardTech @Savior

Thank you!

[dannyelo]

Hey,

The solution posted here, do not remain the active link black. That will require to change the liquid or javascript code.

Please go to Online store > theme > actions > edit code.

Find assets folder > base.css file.

Copy and paste this code at the bottom of the file.

.header__menu-item span {
  color: #9a9591;
  transition: all 0.1s linear;
}
.header__menu-item:hover > span {
  color: black;
}

Hope this helps,

[Melinda5]

Thanks for the reply! I tried the code, but it doesn’t change the inactive links colour on hover.
With the code you provided for some reason it only makes the the active link change colour on hover, but I’m looking to make the inactive (not hovered) links change colour when hovering on a link.

Thanks!