Use different menu for mobile and desktop

Store Design

Topic summary

Request to customize navigation in the Shopify Spotlight theme. The store owner has created two menus and wants to:

  • Assign a “Mobile Menu” to mobile view only and keep the “Main Menu” for desktop.
  • Optionally display the desktop-style navigation on mobile without requiring a tap on the hamburger/menu icon.

Context: Screenshots show the current desktop menu and the mobile hamburger menu. The goal is device-specific menus and possibly a persistent, visible menu layout on mobile.

Key questions:

  • How to conditionally show different menus based on device (mobile vs. desktop) in Spotlight.
  • Whether the desktop-like, always-visible menu can be implemented on mobile within this theme.

Status: No instructions or solutions provided yet; the post seeks guidance. Images are central to understanding the desired menu behavior.

Summarized with AI on January 2. AI used: gpt-5.
1

Hi Guys,

I created two menu in portal

happyyarn_0-1710762784007.png
happyyarn_0-1710762784007.png514×101 6.69 KB

I would like to set Mobile Menu for mobile view only and Main Menu for computer only.

I am using spotlight theme and i don’t have idea to do this.

On the other hand, can I show the menu like desktop version in mobile (show the menu option with out click the menu icon

happyyarn_3-1710763398208.png

desktop menu version:

happyyarn_1-1710763275611.png
happyyarn_1-1710763275611.png749×262 21 KB

Now mobile version:

happyyarn_2-1710763324871.png
happyyarn_2-1710763324871.png652×344 65.2 KB

Thank you.

Appericate if someone have experience on this.