Desktop Mega Menu and Mobile Hamburger Menu

[DANNYFIG]

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. 🙂

[DANNYFIG]

Thank you for the quick reply! :

[bonyecommerce]

Hello @DANNYFIG ,

Could you please share your store URL and password (if needed), i will check and give my solution

[endlessmarktune]

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! 

[DANNYFIG · Accepted solution]

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).

<!--Create variable mobile_nav-->

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

<!-- modified loop -->
{%- for link in mobile_nav.links -%}

[shopbaileybee]

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