Different menu on mobile

Technical Q&A
, , ,
1

Greetings!

I would like two seperate menu structures. One for the regular menu (on desktop) and one for the mobile menu (the three lines on the left)

I have made two different menus under “Navigation” and are using the “Main Menu” for the menu on desktop.
I have also made a menu called Main Menu Mobile, which i want to use for the Three lines menu.

Is there a way to define, so shopify will use the main menu mobile for mobile devices?

2

Hi,

Hope this will help

  1. Need to edit header.liquid or similar file to conditionally render the correct menu

  2. Create menu snippets (ex. - desktop-menu.liquid and mobile-menu.liquid)

  3. Use CSS to hide or display the menu as per screen size

1 Like