Header menu customisation

[motions]

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 🙂

Thank you!!

[soodo]

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.

[motions]

I have but still the same 😞

[Tech_Coding · Accepted solution]

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 </body> on theme.liquid
<style>
  .header__active-menu-item:before{
      width: unset !important;
  }
</style>
RESULT:

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