How can I customize main-menu and sidebar-menu for desktop and mobile?

Shopify Discussion

Topic summary

Goal: Use different navigation menus for desktop and mobile (desktop: “main-menu”, mobile: “sidebar-menu”) in a Shopify store.

Context: Store uses the Ride theme.

Solution (code-based; code snippet is central):

  • Navigate to Online Store > Themes > Edit code.
  • Open header-drawer.liquid (this controls the mobile drawer menu in Ride).
  • Find the loop: {%- for link in section.settings.menu.links -%}
  • Replace it with: {%- for link in linklists[‘sidebar-menu’].links -%}

Result: The mobile drawer menu will render links from “sidebar-menu,” while the desktop menu continues using “main-menu.”

Status: Clear, actionable fix provided; no remaining open questions noted.

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

I want to change the menu for my mobile website than my desktop website, the title for my desktop menu is called “main-menu” and for my mobile, its called “sidebar-menu” .

2

Hi @Hypeyyc

What theme are you using for your store?

3

Ride :slightly_smiling_face:

4

Hi @Hypeyyc

Go to your Online store > Themes > Edit code > open your header-drawer.liquid, find this line of code

{%- for link in section.settings.menu.links -%}

Replace it with this one.

{%- for link in linklists['sidebar-menu'].links -%}