A Shopify store owner wanted to disable clickable links on second-level menu items (like COLLECTION, COLOR, SIZE, MATERIAL under a LUGGAGE parent menu), similar to how Rimowa’s website implements non-clickable category headers.
Two solutions were provided:
Simple approach: Enter “#” as the URL when configuring second-level menu items in Shopify’s navigation settings
Code-based solution (implemented by original poster):
<a> tags with <span> tags for specific menu itemsResolution: The original poster confirmed both methods worked, with code snippets showing the Liquid template modifications for the custom implementation.
Hi,
I want to disable the link on the second level in the menu. For example, on Rimowa’s website, https://www.rimowa.com/us/en/home , the second-level menu such as COLLECTION, COLOR, SIZE, and MATERIAL under the first-level menu LUGGAGE is not clickable. How can I do this?
Many thanks,
Elsie
Hi @Elsie-L
You can do this by entering “#” when setting the second-level menu item.
I hope this can help you.
Thank you so much!!! It worked!
My solution was going to Edit Code → Sections → header.liquid. And around the 460th rows, change the to for some specific menu items and add some style to it.
{%- for childlink in link.links -%}
- {{ childlink.title | escape }}
{%- if childlink.links != blank -%}
{%- for grandchildlink in childlink.links -%}
- {{ grandchildlink.title | escape }}
The changed code:
{%- for childlink in link.links -%}
- {% if childlink.title == "COLOR" or childlink.title == "MATERIAL" or childlink.title == "COLLECTION" or childlink.title == "LATEST" %}
{{ childlink.title | escape }}
{% else %}
{{ childlink.title | escape }}
{% endif %}
