How to remove underline from showing in more than one navigation category?

Store Design
, , ,
1

Hi,

I am using dawn theme and when I select some products that are in more than 1 menu option, there is an underline that appears in more than 1 area and I want the underline only to appear in the area that I point my cursor to. Here is an example. Example - when you select home decor and click on candle holders there is also an underline for home fragrance because the product also lives there.

https://ekety5-vj.myshopify.com/collections/candle-holders

Navigation bar example.png
Navigation bar example.png1192×517 47.4 KB

2

Hi @villabodrum ,

Because the menu item has a sub menu link that matches the link you are accessing. If you want to remove, it will delete both items including ‘Home Fragrance’ and ‘Home Decor’.

Please let me know, I will check it.

3

Hello @villabodrum ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
span.header__active-menu-item {
    text-decoration: none !important;
}
.list-menu__item--active {
    text-decoration: none;
}

ZestardTech_0-1744176136512.png
ZestardTech_0-1744176136512.png1907×802 51.4 KB

Let me know if you need further assistance!

4

Hello @villabodrum

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.header span.header__active-menu-item {
    text-decoration: none !important;
}
.header .list-menu__item--active {
    text-decoration: none;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

5

Hello!

It didn’t work - please see my code

base.css.png
base.css.png1054×544 74.6 KB

6

Hello @villabodrum ,

The code appears to be inserted incorrectly—it’s currently placed inside the keyframe brackets. Please move it outside the keyframe block.

Please check and let us know if you have any questions.

Thank you