Unclickable Shopify Submenu? Fix Your Navigation with This Community-Proven CSS Trick

Hey everyone! As a Shopify expert and someone who spends a lot of time sifting through community discussions, I often see common frustrations pop up. One that recently caught my eye, and frankly, is a real head-scratcher when it happens, is the dreaded "unclickable submenu item." You know the one – you’ve set up your navigation perfectly, all links are there, but when you hover over a main menu item, one of its dropdown options just won't respond to clicks. It’s like it’s mocking you!

This exact scenario came up in a recent thread started by HyperactiveDesigns, who was struggling with their "T-shirts" collection link in a product submenu. The link was there in the navigation, but customers couldn't click it. Talk about a conversion killer!

The Mystery of the Missing Clicks

HyperactiveDesigns shared an image illustrating the problem perfectly:

This is a classic user experience nightmare. Imagine a customer trying to browse your collections, only to hit a dead end. It’s frustrating for them and costly for your business. The issue, as it turns out, often comes down to some tricky CSS.

Unmasking the Culprit: An Invisible Overlay

Thankfully, a helpful Shopify Partner named tim_tairli jumped into the discussion with a brilliant diagnosis. He quickly identified that the problem wasn't a broken link, but rather an invisible element layering over the submenu, effectively "intercepting" mouse clicks. It’s like there’s a transparent sheet of glass between your mouse and the link you want to click.

He found that the theme’s CSS for the submenu, specifically a property called visibility, was incorrectly set to visible. This meant the submenu was technically there, but an invisible part of it was blocking interaction. Here’s a screenshot tim_tairli shared, showing how this might look in your browser's developer tools:

The solution, then, is to ensure this transparent overlay is actually hidden when it’s not supposed to be active, allowing clicks to pass through to your navigation links.

The First Attempt (and Why It Fell Short)

Initially, tim_tairli suggested adding some custom CSS directly to the theme's Custom CSS section. The code looked like this:

.menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
.overflow-menu::part(overflow) {
    visibility: hidden;
}

HyperactiveDesigns tried this, and while it helped somewhat (they could click below the text), it wasn't a complete fix. Plus, tim_tairli noted that "Custom CSS" can sometimes be picky and might not even persist, meaning your changes disappear after a reload. This is a common gotcha when dealing with theme customizations – sometimes the simplest solution isn't the most robust.

The Refined Solution: Custom Liquid in the Footer

Recognizing the limitations of the Custom CSS box for this particular issue, tim_tairli proposed a more reliable method: injecting the CSS via a "Custom liquid" section in the theme's footer. This ensures the CSS is applied consistently and overrides any conflicting styles.

Here's how you can implement this fix for your own Shopify store:

1. Go to your Shopify Admin: Navigate to Online Store > Themes.

2. Edit your Theme: Find your current theme, click Actions > Edit code. (Always duplicate your theme before making code changes!)

3. Access the Theme Editor: Alternatively, you can click Customize to open the theme editor.

4. Add a Custom Liquid Section: In the theme editor, scroll down to the Footer area. Click Add section, and then select Custom liquid from the options.

   

5. Paste the Code: In the "Custom liquid" input box, paste the following code exactly as it appears:

6. Save Your Changes: Don't forget to click Save in the top right corner.

7. Test Thoroughly: Visit your live store and test your product submenus across different browsers and devices to ensure the fix is working as expected.

This approach effectively overrides the problematic visibility: visible; declaration that was causing the invisible overlay. It’s a great example of how a simple CSS tweak, applied in the right place, can fix a seemingly complex navigation problem.

The community discussion also highlighted that if you're using an older or heavily modified theme, these kinds of issues can pop up more frequently. Sometimes, theme updates might introduce new CSS that conflicts with old customizations, or an outdated theme might simply not play nice with newer Shopify features. If you've been running your store for a while and haven't updated your theme, this could be a subtle sign it's time to consider a refresh. But for now, this custom liquid snippet should get your submenus clicking smoothly again!