Auto expand menu on mobile in Spotlight Theme

Store Design
, , ,

Topic summary

Request to change the Spotlight theme’s mobile navigation to auto-expand all menu items on first tap of the hamburger icon, reducing multiple taps through nested levels (hamburger → Shop → All) required currently.

  • Desktop works via hover showing the full menu; mobile requires drilling down, which the author considers poor UX.
  • Goal: When the hamburger menu opens, display all levels/submenus expanded so users can see the full menu immediately.

Context:

  • Site: www.peenkok.es (store still under construction).
  • A screenshot is provided to illustrate the desktop menu behavior; no code snippets were shared.

Open questions / needs:

  • Whether this can be achieved via theme settings or requires custom code (e.g., modifying Spotlight’s mobile navigation JavaScript/CSS to auto-expand submenus).
  • Best practice implications (usability/performance) of fully expanded mobile menus.

Status: No solutions or decisions yet; the author is seeking guidance or implementation help.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi everyone.

I would like to fix something on my website www.peenkok.es, specifically on the mobile version.

On desktop, the menu works great. You hover over it and you see all the menu displayed.

Screenshot 2024-05-12 at 11.41.53 PM.png
Screenshot 2024-05-12 at 11.41.53 PM.png656×378 4.34 KB

On mobile, when you tap on the hamburguer menu, then you see “shop”, then you have to tap shop and then you see “all”, and then you have to tap all and then you reach the end of the menu.

In terms of user experience, this sucks. I would like for users to click on the hamburger menu and see everything displayed. Can someone help me out with this?

Thanks a bunch!

2

store is not finished :slightly_smiling_face: