A user is experiencing navigation issues with the Stiletto theme on mobile devices, where mega menus require three clicks to reach a page—creating poor user experience.
Proposed Solution:
Technical Approach:
A code snippet was provided using Liquid templating to conditionally assign menu handles, allowing the theme to serve ‘main-menu’ for desktop and a custom ‘mobile’ menu handle for mobile devices.
The discussion remains open, awaiting confirmation whether this solution resolves the three-click navigation problem.
I am using the theme Stiletto (which I love) for guarddognetworks.com
The Mega Menus are great desktop but are terrible on mobile (you have to click 3 times to get to a page).
I’d like to implement a different menu for mobile. Can someone point me to a solution?
Menu Handle: mobile
PS: I searched all the help articles for similar questions, but none work for this theme.
Thank you !
The best way to fix this is to use a separate menu just for mobile so it’s faster and easier to navigate.
{% if request.design_mode or template.name == 'index' %}
{% assign menu_handle = 'main-menu' %}
{% else %}
{% assign menu_handle = 'mobile' %}
{% endif %}
You can add a condition so that a different menu appears on mobile while keeping the mega menu on desktop.