How can I change the menu underline to a different style?

[JamieG]

I’d like to remove the generic underline when selecting from the nav menu and replace with a different graphic, which I already have. Where can I change the code to point it to a file that I will upload?

All help gratefully received!

Thank you!

[Dan-From-Ryviu]

Hi @JamieG
Could you share your store link?

[JamieG]

Hi Dan - the website is not live yet but this is what I’m hoping to recreate! Many thanks, Jamie

[JamieG]

Using Studio theme, if that helps?!

[Dan-From-Ryviu]

You can visit your Online store > Themes > Edit code > open base.css file, add this code at the bottom of file to remove underline and change color instead of when hovering on menu

.header__menu-item:hover span {
    text-decoration: unset !important;
    color: green;
}

[JamieG]

Thanks for this. Although the ‘scribble’ looks like I’ve overlaid it, this is actually the graphic I’d like to appear as the new underline. I have it as a separate artwork file. Can this be added within that code?

[Dan-From-Ryviu]

Ahh, I got your mean. Please try to use this code

.header__menu-item:hover span {
    text-decoration: unset !important;
    background-image: url('your image link');
    background-position: bottom center;
}

[JamieG]

Thanks Dan - although that hasn’t worked, unfortunately. I entered the code at the bottom line of the base.css file as follows:

.header__menu-item:hover span {
text-decoration: unset !important;
background-image: url(“https://cdn.shopify.com/s/files/1/0420/5438/5827/files/Website_v1_0025_Layer-25.png?v=1698684089”);
background-position: bottom center;

[Dan-From-Ryviu]

Could you share your preview link so I can check?

[JamieG]

https://hemta7dgqva8feuo-42054385827.shopifypreview.com

[Dan-From-Ryviu]

Please update the code to this and add it to your theme.liquid file before tag instead of

[JamieG]

That’s not worked for me. I’m sure I must’ve done something wrong!

https://hemta7dgqva8feuo-42054385827.shopifypreview.com

[Dan-From-Ryviu]

It’s working just active menu did not work.

Please update code to this

[JamieG]

Thanks a lot Dan - that’s perfect!

[Dan-From-Ryviu]

Very welcome, @JamieG