Alternate Mobile Navigation in Stiletto Theme

Topic summary

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:

  • Implement a separate, simplified menu specifically for mobile navigation
  • Use conditional logic to display different menus based on device type
  • Keep the existing mega menu for desktop while showing a streamlined version on mobile

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.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

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.