Header menu customisation

Store Design
, , ,
1

Hi, I’ve been trying to find a way to remove the underline effect from the selected header menu button but it seems impossible and also I can’t change the search icon because there isn’t icon-search in the code editor. I would really appreciate if you could help me :slightly_smiling_face:

Thank you!!

2

Hey Motions! Some Shopify themes add underline effects or icons via CSS or external libraries, so it’s not always obvious in the code editor.

Here’s what I’d check:

Go to your theme’s CSS file and see if you have something like:

.header__menu-item–active {
text-decoration: underline;
}

You can override it by adding this to the bottom of your CSS file:

.header__menu-item–active {
text-decoration: none !important;
}

Hope this helps.

3

I have but still the same :disappointed_face:

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.header__active-menu-item:before{ width: unset !important; }

RESULT:

Tech_Coding_0-1748864168884.png
Tech_Coding_0-1748864168884.png318×187 9.67 KB

My reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.