When hovering over the sub menu header items, underline the sub header

Store Design
, , , ,
1

Hello everyone,

For reference, the desired outcome is currently working for “Pokemon” level nav, whenever I’m side that open megamall, it will underscore.

I want the same effect for the sub navigation menus, for example “On Fire” - The effect should be, whenever on inside the sub nav menu items, the header should underscore. Example, screenshot below, I am hovering on “Super Electric Breaker (sv8)”, I want on fire to be underlined.

I would like this to be dynamic across all nav’s I create.

Thanks a lot!

cardboardhouse_1-1746985679906.png
cardboardhouse_1-1746985679906.png399×112 16.1 KB

2

Link: https://www.cardboardhouse.store/
Store pw: CBH25

3

Thanks for the reply! Sorry but it’s not helpful unfortunately, I know that it needs to be done with new code in my main.css (base.css) file

4

Hi @cardboardhouse ,

Can you share the website url so that I can check the html, css code from the browser?

5

Sure, it’s;

www.cardboardhouse.store
CBH25

Thanks!

6

Thanks for sharing your website — I looked through it, and based on your structure, here’s a working solution:

For css:

.main-nav__item--toggle.nav-active > .main-nav__item-content > a {
  text-decoration: underline;
}

For JavaScript (place before in theme.liquid or inside theme.js):

document.addEventListener("DOMContentLoaded", function () {
  const grandchildLinks = document.querySelectorAll('.grandchild-nav__item');

  grandchildLinks.forEach(link => {
    const parentSummary = link.closest('details')?.querySelector('summary');

    if (parentSummary) {
      const titleLink = parentSummary.querySelector('a');

      link.addEventListener('mouseenter', () => {
        parentSummary.classList.add('nav-active');
      });

      link.addEventListener('mouseleave', () => {
        parentSummary.classList.remove('nav-active');
      });
    }
  });
});

This will make your parent category (like “ :fire: ON FIRE”) underline when a user hovers any of its subitems — just like you’re aiming for.

If you’d prefer, I’d be happy to apply this directly — feel free to send me a Shopify collaborator invite if that’s easier!

7

Thanks but it didn’t work :disappointed_face:

8

Thanks for trying that out — sorry it didn’t do the trick.

This kind of issue can be tricky to solve fully without seeing the browser console or inspecting the menu behavior live.

If you’re open to it, I can send a secure Shopify collaborator request and take a quick look directly in your store’s theme. You’ll stay in full control and can remove access anytime after it’s fixed.

Just let me know your .myshopify.com store URL, and I’ll send the request right away.

9

Hi @cardboardhouse ,

It was very difficult without checking the css &js code as a whole, but, I guess i found out! Please try this css:

#shopify-section-sections--24453134909783__header > store-header > header > main-menu > details > div > nav > ul > li:nth-child(n+1) > details > div > div > ul > li:nth-child(n+1) > nav-menu:hover > details > summary > div > a {
text-decoration: underline !important;
}
10

Hi @cardboardhouse

Let try to add this Custom CSS:

.main-nav__child ul.child-nav li details:hover summary a.child-nav__item {
  text-decoration-line: underline !important;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 2px;
}

the result:

Screenshot 2025-05-12 at 08.54.35.png
Screenshot 2025-05-12 at 08.54.35.png1313×883 167 KB

11

Thanks a lot - It worked!

12

Thank you. Let me know if you need support any others :hugs:

13

Thanks so much! If it’s your area, you’re welcome to have a look at my new post here haha.