DAWN THEME: collapsible menu on mobile view

Store Design
, , ,

Topic summary

A user seeks to implement a collapsible mobile menu with +/- icons and dividing lines in the Dawn theme, providing a reference image of the desired design for their store (themythwys.com).

Suggested Solutions:

  • Built-in options: Check if Dawn’s header settings include collapsible row functionality under Online Store > Themes > Customize > Header

  • Custom code approach: Wrap menu items in <details> and <summary> HTML elements within theme.liquid or header.liquid files, then add custom CSS for styling the +/- icons and JavaScript to handle toggle interactions

  • App alternative: Install third-party apps like “Meteor Mega Menu” or “Smart Menu” for a no-code solution

The discussion remains open with no confirmed implementation yet.

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

Hello everyone. I need help on making the mobile menu into a collapsible menu with +/- and also with the lines. Like this one below:

IMG_1702.jpeg
IMG_1702.jpeg1320Ă—857 17.9 KB

Thank you in advance!

1 Like
2

Sent you a DM

3

The Dawn theme doesn’t have a built-in collapsible menu like this, but you can achieve it with a few tweaks:

  1. Use Dawn’s existing collapsible row: Go to Online Store > Themes > Customize > Header, and enable the collapsible rows if available.
  2. Modify the navigation code: In theme.liquid or header.liquid, wrap menu items in
    and elements to create collapsible sections.
  3. Add Custom CSS & Javascript: Use CSS to style the “+” and “-” icons and JS to toggle them dynamically when clicked.
  4. Use an App: If coding isn’t your thing, apps like “Meteor Mega Menu” or “Smart Menu” can do this easily.
1 Like