All things Shopify and commerce
Hi for shopify in-built mega menu, I noticed that it does remember which item inside the mega menu
was last clicked. As a result, there is an underline on the last item that was clicked. I managed to removed the underline on the last item by using CSS,
.mega-menu__link {
text-decoration: none;
}
But actually, this just cosmetically remove the underline. The menu still remembers which was the last item clicked, as the on hover behaviour is different for an item which was clicked and an item which was not clicked.
Is there any way, to remove this memory effect, so when the mouse hover over the mega menu it has
consisten behaviour, regardless of whether and item is "active" or "not active", if this is the correct way to describe it. Thank you.
Explore these selectors here
Hi thank you for the reply and tips.
I have tried and I found the below to work. By removing all the underline at various places,
the menu will look like it has no memory on where it was clicked.
.mega-menu__link--level-2 {
text-decoration: none;
}
.header__active-menu-item {
text-decoration: none ;
}
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025