How do I create a mobile menu that is different than the desktop menu?

New Member
2 0 1

Hi, 

I need to create a mobile menu (for main navigation) that is slightly different than the desktop main navigation. One of the dropdown menus is really long and makes for a bad user experience, so I want to remove that dropdown menu in the mobile menu.

Any help is much appreciated!

Thanks,

Michella

Shopify Staff
Shopify Staff
5704 1 334

Hi Michella,

Create a new link list for mobile phones, call it, say, Main Menu Mobile, so its handle becomes main-menu-mobile, then locate your theme's snippet which contains the code for your mobile menu and replace in it the following:

{% for link in linklists.main-menu.links %}

... with:

{% for link in linklists.main-menu-mobile.links %}

Create link lists just for your mobile menu.

What theme are you using?

New Member
2 0 1

Hi Caroline!

Thank you so much. This totally worked.

I'm using Minimal theme.

~Michella

0 Likes
Shopify Staff
Shopify Staff
5704 1 334

Sweet!! Thank you for following up, Michella! :)

0 Likes
Tourist
6 0 0

Very Helpful!  Thank you!  

Should I style inline for this?  How do I set which device size displays which way?
Using the Mobilia Theme.


I cannot find any snippet that contains the mobile menu, which is likely why I need one.  Can I use .liquid logic to create a mobile menu using the code provided to only have a mobile menu register/disable main menu for 480 & below?
 

Thank you!

A modern Visionary Art ecommerce store.
0 Likes
Tourist
8 1 2

Hi there, 

 

I'm using "debut" theme and was hoping someone could assist in showing me where to in the code to tell the site to show "main menu" on desktop devices and "main menu mobile" on mobile devices. 

 

I'm having trouble understanding the instructions  "locate your theme's snippet which contains the code for your mobile menu"

New Member
1 0 0

Hi, 

 

I am trying to locate that but I cant see it on my mobile-nav.liquid . Am I looking at the right place ? 

Many thanks Screen Shot 2020-11-30 at 11.31.22.png

0 Likes