> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/sections-and-features/header.md).

# Header

Configure the header that appears at the top of every page.

The header sits at the top of every page on your store. DRIFT's header includes:

* Your logo (left or center)
* Main navigation menu
* Search icon (opens predictive search)
* Cart icon with item count bubble
* Language switcher (if multiple languages enabled)
* Currency selector (if multiple markets enabled)

## Settings

Open the theme editor → click the header section in the sidebar.

* **Logo image (light / dark mode)** — upload your logo. Dark variant is shown when the site is in dark mode; falls back to the light logo if not set
* **Logo height (px)** — 20–120 px
* **Show logo container** — wraps the logo in a rounded pill with a glassmorphic background. Turn off for wide wordmark logos that look cramped inside a container
* **Show light/dark mode toggle** — display the sun/moon icon in the header so shoppers can switch between modes. Turn off to lock the storefront to whichever mode the theme default is set to. Pairs well with brand-specific color palettes that only work in one mode
* **Logo position** — left, center, or right
* **Menu position** — depends on logo position
* **Sticky header** — keeps the header visible as customers scroll (recommended on)
* **Background opacity** — header transparency over content
* **Show search** — toggle the search icon
* **Show currency selector** — toggle the currency dropdown (auto-shown if multiple markets)
* **Show language selector** — toggle the language dropdown (auto-shown if multiple languages)

## Mega menu (desktop)

For menu items with sub-items, DRIFT renders a mega menu on desktop — a wide dropdown showing all sub-items in columns.

The mega menu auto-organizes based on your Shopify menu structure. Menus themselves are built in the Shopify admin under **Content → Menus**, not in theme settings — add sub-items to a top-level item and the mega menu picks them up automatically.

## Mobile drawer

On mobile, the header replaces the menu with a hamburger icon. Tapping it opens a side drawer with:

* Main menu items (with accordion for sub-items)
* Search input
* Currency / language selectors (if enabled)
* Account link

## Tips

* **Keep top-level menu items to 5-7** — more than that, the header gets crowded
* **Sticky header improves UX** — customers can navigate without scrolling back to the top
* **Test transparency carefully** — a transparent header over a white background means white-on-white text. Make sure there's always contrast
* **Header height** — DRIFT's default header is intentionally compact. Resist the urge to make it taller — vertical space is at a premium