Customizing different header menus for mobile and desktop seperately

Technical Q&A
,
1

Hello, I am trying to customize two seperate main menus for my header (one for mobile, and one for desktop). Although I am having trouble trying to write the correct code so I can hide the mobile menu from desktop and vise versa with the second menu to display them seperaly, as one menu is too long for mobile.

My website is https://aventusluxury.com/
I’m using the Fabric theme

2

Hi @nobilisjewelry ,
You can absolutely use two separate menus in your header-one for desktop and one for mobile. The Fabric theme doesn’t include this by default, but you can implement it with a small Liquid update plus CSS.

How to Set Up Separate Menus for Desktop & Mobile

1. Add both menus in the header.liquid (or header section)

Locate your header section file:

Online Store → Themes → Edit code → Sections → header.liquid

Inside the area where your main navigation is rendered, add two separate menu blocks:

<!-- Desktop Menu -->
<nav class="desktop-menu">
  {% render 'navigation', menu: settings.desktop_menu %}
</nav>

<!-- Mobile Menu -->
<nav class="mobile-menu">
  {% render 'navigation', menu: settings.mobile_menu %}
</nav>

If your theme uses different snippet names, adjust accordingly.

2. Add settings to pick menus in the theme editor

In the same section, scroll to the schema and add:

{
  "type": "link_list",
  "id": "desktop_menu",
  "label": "Desktop Menu"
},
{
  "type": "link_list",
  "id": "mobile_menu",
  "label": "Mobile Menu"
}

This lets you assign two different menus directly from the Customizer.

3. Hide each menu based on device size

Add this CSS to your theme:

Online Store → Themes → Edit code → Assets → base.css (or theme.css)

/* Desktop shows desktop menu only */
.desktop-menu {
  display: block;
}
.mobile-menu {
  display: none;
}

/* Mobile shows mobile menu only */
@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}