Mega Menu underline won't go away

Solved

Mega Menu underline won't go away

Ravenwoodstore
Tourist
11 0 7

Hi all, 

 

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

Ravenwoodstore_0-1738155421280.png

 

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

 

 

 

Store: https://ravenwood.store/

No password. 

Accepted Solution (1)

htmlBurger
Shopify Partner
83 7 20

This is an accepted solution.

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.

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com

View solution in original post

Replies 8 (8)

topnewyork
Astronaut
1166 154 197

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!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Ravenwoodstore
Tourist
11 0 7

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. 

topnewyork
Astronaut
1166 154 197

@Ravenwoodstore 

try this code 

 

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

 

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Moeed
Shopify Partner
6736 1820 2202

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 </body> tag

 

<style>
.header__menu-item:hover span {
    text-decoration: unset !important;
}
.list-menu__item {
    text-decoration: unset !important;
}
</style>

 

RESULT:

Moeed_0-1738156369258.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Ravenwoodstore
Tourist
11 0 7

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? 

htmlBurger
Shopify Partner
83 7 20

This is an accepted solution.

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.

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com
Ravenwoodstore
Tourist
11 0 7

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

htmlBurger
Shopify Partner
83 7 20

Great! Always happy to be of help!

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com