Mega menu

A mega menu is a wide dropdown that appears on hover for a top-level navigation link. Dost supports three styles: Editorial, Dropdown wide, and Dropdown (default).

How it's wired

1. Online Store → Navigation → Main menu — add the top-level link (e.g. Shop).
2. Customize → Header → Add block → Mega menu.
3. Set the block's Nav handle to match the link title (case-insensitive — Shop matches shop).
4. Pick the style — Editorial.
5. Add column blocks: each column has a heading and a list of links sourced from a sub-menu of the same name.

Styles

Editorial

Wide multi-column dropdown with optional image tile in the rightmost column. Best for catalog brands with rich category imagery.

Settings inside the block:

• Columns (1–4)
• Each column references a sub-menu link group
• Optional image tile (image + caption + link)

Dropdown wide

Full-page-width dropdown with a single column of links. Centered, no image tile.

Dropdown

Standard narrow dropdown matching the link's width. The fallback when no mega-menu block matches the nav handle.

Dropdown style — global toggle

Theme settings → Header → Dropdown style:

• content-width — narrow, matches the link's width
• full-width — every dropdown spans the page width

If full-width is selected globally, all top-level dropdowns (whether mega-menu blocks or not) become wide.

Mobile rendering

Mega-menu blocks aren't rendered on mobile — instead, the mobile drawer shows the underlying Shopify menu structure as nested accordions. So always make sure the Online Store → Navigation menu has correct sub-menu items, even if you rely on Editorial blocks for desktop.

Backdrop

When any mega-menu opens, a translucent backdrop covers the page so the dropdown reads cleanly. Backdrop opacity is fixed at 35% and not configurable in v1.