Mega Menu underline won't go away

Store Design

Topic summary

A user encountered an issue where a newly added ‘Collections’ tab in their mega menu remained permanently underlined and highlighted, unlike other menu items that only showed these effects on hover.

Initial troubleshooting attempts:

  • Two community members suggested CSS solutions targeting span.header__active-menu-item with properties like text-decoration: none and adjustments to font-weight and color
  • These solutions removed the underline but didn’t resolve the persistent highlighted state

Root cause identified:
The issue stemmed from both the Collections link and another menu item pointing to the homepage. This caused the Collections tab to display an active state whenever users were on the homepage.

Resolution:
Changing the Collections link to point to a different page resolved the problem. The discussion is now closed with the issue successfully solved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I have a mega menu which I have underlines hidden through css:

Ravenwoodstore_0-1738155421280.png
Ravenwoodstore_0-1738155421280.png294×250 6.31 KB

However, I’ve just added a new tab called ‘collections’ and I can’t seem to get rid of the underline on it. Any ideas? Thanks!

Ravenwoodstore_1-1738155475474.png
Ravenwoodstore_1-1738155475474.png541×247 77.6 KB

Store: https://ravenwood.store/

No password.

1 Like
2

Use this code instead of your code

span.header__active-menu-item {
    text-decoration: none !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hey @Ravenwoodstore

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1738156369258.png
Moeed_0-1738156369258.png1266×376 28.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

That takes away the line, but it still is acting like its highlighted. You can see a slight colour shift when hovering over each menu item, but the ‘collections’ tab is always highlighted. You see that? Thanks for the reply though.

1 Like
5

@Ravenwoodstore

try this code

span.header__active-menu-item {
    font-weight: normal !important;
    user-select: none !important;
    text-shadow: none !important;
    color: #bbaf98 !important;
}
6

Hi Moeed, thanks for the reply.

This code takes away the underline from the hoverover - I still want this to work as before, just this one extra tab I’ve added doesnt seem to follow all the others.

How it should work (like all othe other tabs right now):

  1. Menu item is slightly faded out with no underline

  2. Hover over menu item - it adds an underline and colour brightens

With the new ‘collections’ tab, it is always underlined and brighter coloured - almost like my mouse is over it constantly. Does that make sense?

7

Hello,

This happens because both of the links in the mega menu lead to the homepage. Because of this, when you are on the homepage, the Collections link has an active state. To remove this active state, just change the links to lead to other pages.

1 Like
8

You are correct! Thanks a lot for noticing that, it totally slipped by when I was just testing!

9

Great! Always happy to be of help!