Css changing menu and hover links color on debut

4 0 5

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:

<li class="site-nav--active">

        <a class="site-nav__link site-nav__link--main" href="/">Home</a>

and so on with the other main menu links other than home

I tried

    color: #ffffff;

a:hover {

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
$color-link: $color-body-text;
$opacity-link-hover: 0.1;
$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.




46 0 2



it would be really helpful to give me url, so I can tell you exactly what to do.


Try to add your changes at the end of theme.scss file, add this :


.site-nav__link {

  &:hover {

    color: #f7c025;



4 0 5

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!

New Member
1 0 0

Hi, bro. How did you make that?

New Member
3 0 0

Hi JerBear,


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.