So I'm attempting to change the menu's hover color (i would also like all hover links to be #f7c025 as well) from an opacity change to a color change in theme.scss.liquid. After following two deprecated articles and attempting my own edits the opacity change as still overridden all of my attempts.
The two depreciated links are here:
So I used the web developer inspector tool and saw what said objects were defined as:
I can't seem to upload the screen shot so it's:
<a class="site-nav__link site-nav__link--main" href="/">Home</a>
and so on with the other main menu links other than home
to no affect just messing around.
I also played with the /*================ Site Nav Links ================*/ area to no avail
I was able to mess around with opacity on hover but not color and I assume this rule is overriding what i'm trying to do.
// Link buttons and secondary cta
$transition-link-hover: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
I've tried changing the $color-link: $color-body-text; to $color-link: #f7c025; which hasn't worked either.
I would apprecaite anyone's insight as this is my first shopify build and not sure if im doing something fundamentaly wrong.
Thanks for your response Maya, the site is turks-head-coffee.myshopify.com
but i beleive it is private and i think this is the correct password: montay . Also your suggested edit seemed to have no effect.
Let me know if and thanks again!
I just had the same problem when I was trying to change the hover color of one of my text classes in the theme css, specifically ".mega-subtitle".
I don't know why the code is over written but I also changed the '&:hover, &:focus' color to a specific rgb and after seeing that it didn't take it, I tried ruling the css change as '!important' e.g. (color: rgb(243, 217, 255) !important;) which fixed the code being overwritten somewhere else, not the best coding practice but it works.