Mega Menu underline won't go away

Store Design
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!