Click my name to see my other posts. I got a fix to this in the last few days
Topic summary
A Shopify store owner encountered an issue where main menu items with dropdowns weren’t functioning as clickable links, though the dropdown items themselves worked correctly.
Solution Provided:
Multiple users suggested editing the theme code (specifically header.liquid or header-dropdown-menu.liquid files). The primary fix involved:
- Wrapping a
<span>element within the<summary>tag with an<a>tag to make top-level menu items clickable - Adding proper link markup with
{{ link.title | escape }}
Secondary Issue:
After implementing the fix, the menu item colors changed unexpectedly. Users wanted black text but the solution altered the styling.
Resolution:
The original poster confirmed the solution worked and later resolved the color issue, sharing the fix in other posts. One commenter also noted an additional problem: menus closing prematurely on desktop due to border gaps causing hover state loss between top-level items and dropdowns.
Code snippets and screenshots were shared throughout to guide the implementation.