Mobile Navigation Menu - Automatically Open First Sub-Menu

Shopify Discussion

Topic summary

Goal: Make the mobile navigation show visible sub-menus (like desktop) for a store reportedly using Vision 3.1.0. Current mobile shows a hamburger/drawer with no dropdowns; desired is desktop-like nested sub-menus. Images provided illustrate current vs desired behavior.

Key updates and options:

  • Custom code: Two responders offered to implement a desktop-like mobile menu via additional code and CSS; one asked to continue via PM.
  • No‑code app: Recommendation to use Meteor Mega Menu, which includes mobile drawer templates and supports images in mobile/desktop menus.
  • Theme guidance: A Shopify staff member noted behavior depends on the theme, asked to clarify the exact theme name and what “sub‑menu” means, and explained the standard hamburger menu (three-line icon). If the theme lacks this option, either edit theme code or use a third‑party app (links provided).

Decisions/next steps:

  • OP confirmed they want mobile to look and function like desktop.
  • Pending: Clarification of the theme details and selection between custom coding or an app.

Status: Open; no final implementation chosen yet.

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

Hello!

We are using theme vision 3.1.0. I was hoping to edit our website so on mobile view, the sub-menu drop down is visible. Currently its only our desktop view that will show our drop down sub-menu from our header menu, not the mobile view. Currently our mobile menu is this, so no drop down menu:

image_67192321 (1).JPG
image_67192321 (1).JPG4284×5712 4.83 MB

And we want it to look like this:

image_67217153 (1).JPG
image_67217153 (1).JPG4284×5712 4.33 MB

Was wondering is there is a special code we need to add?

our website is wear our support on the mother of all journeys – continuall (continuallwear.com.au)

Any help woukd be greatly appreciated. Thank you so much in advance.

2

@AshBolton1 For most of the website, the mobile menu opens as a side menu rather than displaying like it does on the desktop. Do you still want the menu and drop-down menu to look like the desktop version? I can implement both options, but it will require additional code and CSS adjustments.

3

Hello! Yes I would like the menu to look and function like the desktop. Thanks so much!

4

Hello
You want to create a dropdown submenu for your mobile view.
I can do this for you, but this will require custom coding and some efforts.
please PM me for further discussion.
Thanks

5

Hello :waving_hand:

If you’re open to a no code solution, you could use an app like Meteor Mega Menu which has mobile drawer templates built in (as well as support for images in your mobile and desktop menu).

Benjamen_0-1719946609997.jpeg
Benjamen_0-1719946609997.jpeg3198×1948 173 KB

Also, know that our Customer Success Team can help achieve a look you’re after.

I hope this helps :blush:

6

Hi, @AshBolton1 . The way your menu appears will depend on the theme you’re using. Are you able to clarify which theme it is and what you mean by sub-menu? I see you’ve mentioned the theme version, but not the name of the theme itself, and I also see your menu appearing in your mobile example. I just want to make sure I’m fully understanding so I give you helpful advice. On mobile devices menus typically appear as a ‘hamburger menu’, the three lines shown to the left of your header. This is quite standard for mobile online stores so your customers shouldn’t have any issues navigating your store. However, if you want your menu to appear as it does on desktop and your theme doesn’t offer this option you would need to edit this in your theme code or use a third party app.