Css changing menu and hover links color on debut

Tourist
4 0 4

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:

https://ecommerce.shopify.com/c/ecommerce-design/t/theme-settings-colors-how-to-change-menu-text-col...

https://ecommerce.shopify.com/c/ecommerce-design/t/hover-link-color-282007

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

a:link{
    color: #ffffff;
}

a:hover {
   color:#f7c025;
}

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.

 

 

 

0 Likes
Tourist
47 0 2

Hi, 

 

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;

  }

}

0 Likes
Tourist
4 0 4

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!

0 Likes
New Member
1 0 0

Hi, bro. How did you make that?

0 Likes
Highlighted
New Member
1 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.

0 Likes