Horizon Mobile Menu Update

Shopify Discussion
,
1

Hi everyone,

I am using the Horizon theme. I want to customize the menu only for mobile.

  1. How can I change the menu order just for mobile?
  2. How can I add extra elements to the mobile menu?
  3. Is there a way to make these changes without affecting the desktop menu?

Thank you!

2

Hey,

In order to add the extra elements or changing it’s layout for the mobile without effecting the Desktop menu requires to do the custom code in your theme file. Could you please share the details along with the store url and collab code so that I can send you request for accessing the store and do the requested changes.
Thanks

3

Technically, it’s a pretty simple code edit.

You need to modify this code:

to become:

{% assign mobile_menu = block_settings.mobile_menu | default: block_settings.menu %}
{% render 'header-drawer',
  class: 'header__drawer--mobile',
  linklist: mobile_menu,
  data_header_drawer_type: 'mobile-drawer'
%}

and then modify the block schema to allow to specify this second menu:

like this:

{
  "type": "link_list",
  "id": "menu",
  "label": "t:settings.menu",
  "default": "main-menu"
},
{
  "type": "link_list",
  "id": "mobile_menu",
  "label": "Mobile menu",
  "default": "main-menu"
},

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
1 Like
5

You may also rearrange or hide elements in the Horizon theme mobile menu via CSS media queries like @media (max-width: 768px). Add new items by editing the mobile menú liquid file and adding the new links but within a mobile specific condition so your desktop won’t be modified.

6

Thank you. I just give this to ChatGPT and now it’s working perfectly!