> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header & navigation

> Configure the sticky header, mega menu, search, wishlist, account button and market selectors.

# 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/header-desktop.png)

Desktop header with inline menu and action icons

***

## Layout

```text theme={"system"}
+--------------------------------------------------------------------+
| [V] VARAHI  Overview  Architecture  Mobile App  |  o  o  o  Cart 0 |
+--------------------------------------------------------------------+
```

| Region | Contents |
| - | - |
| Left | Logo lockup, then the inline navigation menu |
| Right | Language, country/currency, search, wishlist, account, cart, and the mobile menu button |

***

## 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:

```text theme={"system"}
Link (level 1)
|-- Sub-link (level 2)
    |-- Sub-sub-link (level 3)
        `-- Sub-sub-sub-link (level 4)
```

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

> [!NOTE]
>
> 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

| Button | Setting | Behaviour |
| - | - | - |
| **Search** | `enable_search` | Opens a command-palette-style modal with live results |
| **Wishlist** | always on | Opens a wishlist modal; items persist in `localStorage` |
| **Account** | always on | Shopify's native customer account UI, themed to match |
| **Cart** | always on | Opens the slide-out cart drawer with live line items |

> [!WARNING]
>
> 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.

| Selector | Appears when | Behaviour |
| - | - | - |
| **Language** | Store has 2+ published languages | Swaps the storefront language |
| **Country / currency** | Store has 2+ markets | Sets the currency and country, and the `data-currency` attribute on `<body>` |

Both are `desktop-only` — on mobile they are inside the account UI, because the
header does not have room for two more controls.

> [!TIP]
>
> 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

> [!NOTE]
>
> 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

> **The cart button is cut off on mobile**
>
> 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.

> **My menu does not appear at all**
>
> 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.

> **Can I hide the wishlist icon?**
>
> Yes — remove the button from `sections/header.liquid`. Note that the wishlist modal
> and its persistence code will also stop being reachable.

> **Does the header hide on scroll down?**
>
> No. The header is fixed and always visible. For a brand-led storefront, a
> persistent header reduces the cost of every navigation decision.

***

> **[Branding](https://varaahi.vritservicespro.com/settings/branding.md)**
>
> The logo, favicon and social card.

> **[Footer](https://varaahi.vritservicespro.com/settings/footer.md)**
>
> Newsletter, social links, and the legal row.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.