Why isn't my hover link color change working in the Dawn theme?

Store Design
, , ,
1

I’ve applied the below CSS to Dawn theme, however it’s not taking effect. Could something be overriding it?

.rte a:hover - doesn’t work

p a:hover - doesn’t work

.header__menu-item:hover span - works ✓

.mega-menu__link:hover - works ✓

.mega-menu__link–active - works ✓

/** ? ? ? Hyperlinks ? ? ? **/
.rte a:hover,
p a:hover,
.header__menu-item:hover span,
.mega-menu__link:hover, 
.mega-menu__link--active {
  color: var(--gradient-base-accent-2) !important;
}

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler

Thanks!

2

@pearlerwork - can you please share a page link where it is not working?

3

Hi @pearlerwork ,

Glad to support you today.

Your code is correct but it is overwritten by the other code:

GemPages_0-1673316996883.png
GemPages_0-1673316996883.png1856×900 206 KB

I suggest you should add your code to above the tag on the Theme.liquid file like this:

GemPages_1-1673317264525.png
GemPages_1-1673317264525.png1170×932 50.9 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

4

Thanks for your reply @GemPages !

As I’m hoping to sell this design to multiple people, I’m hoping to keep all of my CSS edits inside my custom-styles file. Do you think you can see what the overriding code might be? I can’t seem to identify it to alter that..

5

Hi @pearlerwork ,

I checked and found this code is overwrite your code:

GemPages_0-1673320036859.png
GemPages_0-1673320036859.png1903×998 256 KB

I can’t check that code come from but I think you can find all Css file on your theme and search keyword is #section-template–17331353682193__425973c0-75af-4afd-b7d1-0ddd823d5c8f to find that code and remove it.