Changing color of menu underline on hover - Pipeline theme

amcfarlane
Shopify Partner
13 0 3

I am having a hard time figuring out how to change the underline color on hover with the Pipeline theme. It doesn't appear to be an option in the theme settings. 

 

I have tried this code, but no luck. 

 

.header__menu-item span:hover {
color: red;
}

 

Store: https://sincerelychainco.com/?_ab=0&_fd=0&_sc=1

password: Scc8500!

 

Thank you!

Replies 4 (4)

osamafarooqi71
Shopify Partner
243 19 40

Hello @amcfarlane, I have visited your store and you can easily fix this by updating your theme files.

Please go to Online Store > Themes > Choose your theme > Edit Code 

There find the file name "site.scss.css", and open this file to edit.

Then find ".main-menu__nav-item>a:before" and in this style update the "background" to your desired color. I have updated it to Yellow but you can choose whatever you like.

 

change background color on hover shopify developer shopify bug fix shopify theme customization font issue fix osamafarooqi71 .PNG

 

.main-menu__nav-item>a:before{
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    left: 50%;
    transform: translate(-50%);
    transition: all .3s ease;
    background: yellow; /* update your desired color and remove this comment */
    height: 1px;
}

 

 

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution
amcfarlane
Shopify Partner
13 0 3

Hello, thank you for your reply. 

 

I am having trouble finding "site.scss.css". When I search for it nothing comes up. Do you know what file it would be under?

osamafarooqi71
Shopify Partner
243 19 40

No problem, you will find theme.liquid file. Open this file and below the <head> add a new line and past the following code. Hopefully, it will give you the desired result.

 

<style>
.main-menu__nav-item>a:before{
background: yellow !important;
}
</style>

 

Regrds,

Osama Farooqi 

Shopify Theme Developer | Contact me | Hire expert
- Was my reply helpful? Click Like 🙂 to let me know | Buy Me Coffee
- Was your question answered? Mark this as Accepted Solution
amcfarlane
Shopify Partner
13 0 3

No luck. I found <head> and added the code, but I don't see a change. Did I put it in the right spot?

amcfarlane_0-1687236176102.png