Desktop Mega Menu and Mobile Hamburger Menu

Shopify Discussion

Topic summary

A Shopify store owner resolved a navigation inconsistency between desktop and mobile views.

The Problem:

  • Desktop: A “Shop” button triggered a mega menu with submenus (working correctly)
  • Mobile: The hamburger menu only showed the “Shop” link, requiring an extra tap to access submenus
  • Goal: Display submenus directly when opening the mobile hamburger menu

The Solution:
The issue was resolved by modifying the header-drawer.liquid file:

  • Created a separate mobile menu in Shopify (distinct from the desktop mega menu)
  • Assigned a variable targeting the mobile menu: {%- assign mobile_nav = linklists['mobile-menu'] -%}
  • Modified the loop to iterate through the mobile menu links: {%- for link in mobile_nav.links -%}

This approach maintains two separate navigation structures—one optimized for desktop (mega menu) and one for mobile (drawer menu with direct submenu access).

Follow-up Question:
Another user asked whether additional parameters need to be configured or if the code works automatically once implemented. This remains unanswered.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

For desktop, I have a menu/button called “Shop” and when clicked, it displays the Mega Menu with its submenus. It works beautifully, but when the Hamburger Menu is clicked on mobile, it displays the one menu, “shop” which then needs to be clicked to bring up the submenus.

I’m looking to have the submenus appear when clicking the hamburger menu, but display the “Shop” menu/button on desktop.

Thanks in advance. :slightly_smiling_face:

2

Thank you for the quick reply! :

Mega_Menu.jpg
Mega_Menu.jpg2170×1130 88.1 KB

Hamburger_Menu.webp
Hamburger_Menu.webp718×724 9.01 KB

3

Thank you for reaching out with your request regarding the Mega Menu functionality on your website. I understand that you’d like the submenus to appear directly when the Hamburger Menu is clicked on mobile devices, while maintaining the current Shop button functionality on desktop.

I’m confident that I can implement a solution to enhance the mobile user experience by allowing the submenus to be displayed directly when the Hamburger Menu is clicked. This adjustment will streamline navigation for mobile users and ensure they have easy access to your submenus without additional clicks.

Please let me know if you have any specific requirements or if there’s a timeline you’d like me to follow for this enhancement. I’m looking forward to helping improve your store’s functionality!

4

Thank you everyone, but I got it figured out.

In header-drawer.liquid, you need to assign a variable that targets your mobile menu. Then you modify the loop. I have created two main menus, one for mobile (Drawer) and one for desktop (Mega Menu).

{%- assign mobile_nav = linklists[‘mobile-menu’] -%}

{%- for link in mobile_nav.links -%}

5

does anything need to be plugged into the code or will that automatically solve this issue once implemented?