Shopify themes, liquid, logos, and UX
Hi all,
I have a mega menu which I have underlines hidden through css:
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!
Store: https://ravenwood.store/
No password.
Solved! Go to the solution
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.
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!
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.
try this code
span.header__active-menu-item {
font-weight: normal !important;
user-select: none !important;
text-shadow: none !important;
color: #bbaf98 !important;
}
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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?
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.
You are correct! Thanks a lot for noticing that, it totally slipped by when I was just testing!
Great! Always happy to be of help!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025