Skip to main content

​
Header & navigation

The header is a fixed 80px bar (60px on mobile) that carries your brand, your navigation, and the four actions shoppers expect: search, wishlist, account, and cart.
Desktop header

Desktop header with inline menu and action icons

​
Layout

​
The navigation menu

Theme settings → Header → Main Navigation Menu. Pick any menu from your store.

​
Desktop — inline, from 1024px

Your top-level links render inline in the header. If a link has child links, a caret appears and a mega menu opens on hover. The mega menu supports four levels of nesting:
Each level indents and shifts right, so a deep hierarchy stays readable instead of collapsing into an unusable wall of text.

​
Mobile — drawer, below 1024px

Below 1024px the inline menu is replaced by a hamburger drawer that slides in from the left. The drawer contains:
  • Your page navigation — the same top-level links, with expandable sub-menus
  • A close button and a focus trap
  • Body scroll lock while open
The drawer intentionally contains only navigation. Account, wishlist and cart actions stay in the header bar where shoppers expect them, so there is exactly one place to tap for each action.

​
Action buttons

The wishlist is browser-local. Items are stored in the visitor’s own browser, not on your server, and do not follow them between devices. It is a conversion and delight feature — if you need true cross-device wishlists, install a wishlist app and the native buttons will be replaced.

​
Market selectors

When your store has more than one language or market, VARAHI adds a selector to the header automatically. No setting required. Both are desktop-only — on mobile they are inside the account UI, because the header does not have room for two more controls.
The country selector is a native <form> that posts to Shopify’s localization endpoint. Prices update on the next page load with no JavaScript of your own.

​
Mobile behaviour

Below 1024px the header tightens so every action stays reachable:
  • Height 80px — 60px
  • Icon buttons 44px — 32px, glyphs 20px — 18px
  • Logo mark 36px — 30px, wordmark 24px — 15px
  • The “Cart” label is hidden — the icon carries it
  • Below 400px the logo sub-text and the cart count badge are hidden
Every icon target stays at or above 32px with a 44px-tall touch area, which keeps the header usable on a phone without a magnifier.

​
Common questions

Your logo wordmark is too long. Shorten Logo text, remove the Logo sub-text, or switch to a Logo image — a wide image scales down to the available width automatically, while a long text wordmark does not.
Either no menu is assigned under Main Navigation Menu, or the menu has no links. VARAHI renders the menu only when the assigned menu contains at least one link.
Yes — remove the button from sections/header.liquid. Note that the wishlist modal and its persistence code will also stop being reachable.
No. The header is fixed and always visible. For a brand-led storefront, a persistent header reduces the cost of every navigation decision.

Branding

The logo, favicon and social card.

Footer

Newsletter, social links, and the legal row.