Can someone help me fix my main menu? The ones that have a dropdown aren’t working. The dropdown links work, but the main link doesn’t.
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.
Hi @lillylove ,
Looks like we need to make some code changes.
To get started, follow these steps:
-
Log in to your Shopify Admin panel.
-
Go to Online Store > Theme > Edit code.
-
In the code editor, navigate to the header.liquid file (note: this might vary depending on your theme, but typically mega menus are found here).
-
Find the code similar to the below one.
-
Find the code with the nav element and classes “header__inline-menu header-mega-menu” (specific to the Ocean Breeze theme).
-
You will notice a ‘details summary’ tag and replace the span element within the summary tag.
-
Replace the span tag with the below code and it should work! (We need to do similar work for the child and grandchild link if its present)
{{ link.title | escape }}
If you encounter any issues or need help, please don’t hesitate to reach out. I’m here to assist you!
1 Like
Hi @lillylove The top level items are not rendering as links at all check theme settings to see if this is an option.
If there’s no theme option you will need a theme customization.
On desktop if you’ve noticed the menus close too early, that’s because there is an unnecessary gap cause by the border between the top level item and the dropdowns so the hover state is lost when moving the mouse down.
If you need this fixed or customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Hi @lillylove ,
If you use a free theme from Shopify. May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
-
Snippets/header-dropdown-menu.liquid
-
Wrap by tag. Refer screenshot below to add code
rmb add
This worked! Thank you! It did change the color of the menu items though. Can you please help me figure that out? I’d like them to be all black
1 Like
Awesome! This worked! However, it changed the color of menu items with dropdown menus and hyperlinked them. I saw @lillylove had the same issue with the solution. Any tips?
Click my name to see my other posts. I got a fix to this in the last few days
Awesome! Thank you!