Header overview
Logo, navigation, search, cart icon, account, mobile drawer — all configured from one section.
Updated 2026-05-09
The header is a single section under Customize → Header group → Header. It auto-collapses navigation that doesn't fit, supports sticky and transparent modes, and exposes a mobile drawer with mega-menu support.
Section settings (top-level)
| Setting | Notes |
|---|---|
| Container width | Boxed (matches global container) or Full width |
| Logo image | Upload via Shopify File library |
| Logo width | px slider; mobile auto-scales proportionally |
| Layout | One of three layouts — see Header layouts |
| Sticky header | Enables sticky on scroll |
| Sticky style | always / on-scroll-up (hides on scroll-down, reveals on scroll-up) |
| Transparent | Overlays the announcement / first section (homepage only) |
| Show search icon | Opens search overlay |
| Show account icon | Hidden if customer accounts disabled in Shopify admin |
| Show cart icon | Always visible if cart-drawer enabled |
Blocks
The header section accepts mega-menu blocks. Each block defines a navigation handle (e.g., Shop) and a layout (editorial / dropdown / dropdown-wide). When a top-level menu link's title matches a block's handle, that link gets the block's mega-menu instead of the default dropdown.
See Mega menu.
Auto-collapse
Dost runs a tiny inline script that measures whether the menu items overflow the available horizontal space. If they do, it collapses the desktop menu into a hamburger icon. This avoids the awkward "menu items wrap to two lines" state on tablet sizes.
You can force collapse by adding ?headerCollapse=1 to any URL for testing.
Mobile
Below 1024px the header switches to a mobile layout: hamburger left, logo center, search + cart right. The full menu opens as a left-slide drawer. Mega-menu blocks are flattened into accordion lists in the drawer.