Re: Changing color of menu underline on hover - Pipeline theme

amcfarlane · ‎06-19-2023

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!

osamafarooqi71 · ‎06-19-2023

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.

.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 · ‎06-19-2023

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 · ‎06-19-2023

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 · ‎06-20-2023

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

Re: Changing color of menu underline on hover - Pipeline theme

Changing color of menu underline on hover - Pipeline theme

Community Blog Articles