Mobile menu

Below 1024px the desktop nav is replaced by a hamburger button that opens a left-slide drawer.

Contents

The mobile drawer shows:

1. Logo at the top (mirrors the header logo)
2. Primary navigation as nested accordions — each top-level link expands into its sub-menu
3. Account link (if accounts are enabled)
4. Currency / Language pickers (if multiple are configured in Shopify Markets)
5. Footer-style links at the bottom (configurable via a separate menu handle)

Sub-menu rendering

Sub-menus are flattened from the Online Store → Navigation structure — Dost does NOT render the desktop's mega-menu blocks (Editorial / Dropdown wide) on mobile. Always populate the underlying Shopify menu with the structure you want users to see on phones.

Tip: keep mobile menu link counts under ~25. Anything more becomes a fatigue scroll on small screens.

Closing behavior

The drawer closes when:

• The user taps the X button
• The user taps the backdrop
• The user navigates to a new page (link tap)
• The user swipes left on the drawer panel

Footer-style links

The bottom block of the drawer can host a small set of supporting links (e.g., Help, Locations, Track order). It uses a separate menu — set its handle via Header settings → Mobile drawer footer menu.

Account access

If customer accounts are enabled in your Shopify admin, an Account link appears in the drawer. If accounts are disabled, the link is automatically hidden.