> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/global-sections/header-and-navigation/header.md).

# Header

The main desktop navigation bar displayed at the top of every page. Includes your store logo, primary menu, mega menu dropdowns, search, account and cart icons, with support for sticky and transparent modes.

<figure><img src="/files/9SkLHRdnWzoD6q0Ut40M" alt=""><figcaption></figcaption></figure>

***

### How to find

**Theme Editor → Header group → Header**

The Header section controls only the desktop navigation bar. Mobile navigation is handled by the separate [**Mobile Header**](/docs/avante-themes/global-sections/header-and-navigation/mobile-header.md) section.

***

### Logo

| Setting          | What it does                                                                                                |
| ---------------- | ----------------------------------------------------------------------------------------------------------- |
| Logo image       | Your store logo. If not set, the store name displays as text                                                |
| Transparent logo | Alternative logo for transparent header mode — typically a white or light version for dark hero backgrounds |
| Logo height      | Logo size in pixels. Applies to both desktop and mobile                                                     |

<figure><img src="/files/BWMH0N4GmqJMHVy3SQLw" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="lightbulb" %}
**Tip:** Upload your logo as a PNG with a transparent background. This ensures it works cleanly on both default and transparent header states.
{% endhint %}

***

### Miscellaneous

To create or edit menus, go to **Shopify Admin → Content → Menus**.

<figure><img src="/files/ViXMl3bLKObAuSMV3FOX" alt=""><figcaption></figcaption></figure>

The **Miscellaneous** block controls what appears in the header bar — menu links, search, cart, account, and other elements. Most settings are self-explanatory, but a few features are easy to miss:

{% columns %}
{% column %}
**Highlight menu items** — draw attention to specific links like "Sale" or "New In". Enter the menu item names (comma-separated) in the **Highlight menu item** field and pick a color. The matching links will stand out from the rest of the navigation.

<figure><img src="/files/bTROwoYkCDwBoSd5T4ua" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
**Search as a field** — instead of a small icon, you can display a full inline search bar directly in the header. Set **Search → Style** to **Field**.

<figure><img src="/files/21yXXz4E8ybPrgbghnCT" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}
**Store selector** — if you run multiple regional stores, enable the store selector to let visitors switch between them. The selector content is configured in the **Store selector drawer** section in **More header sections**.

<figure><img src="/files/P9mBVhlhLf3Rc3asrsqp" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
**News icon** — shows a bell or fire icon that opens the News Drawer. The drawer itself is configured separately in **More header sections**.

<figure><img src="/files/WtFd6nBxRx84bpQ9wLg4" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

***

### Mega menu & Hover mega menu

The Header supports two advanced navigation blocks — **Mega menu** (multi-column layout with optional banner) and **Hover mega menu** (links with up to two banners and per-item visuals). Both are added via **Add block** inside the Header section.

For setup instructions, settings, and troubleshooting, see the dedicated guide: [**Mega menu & Hover mega menu**](/docs/avante-themes/features-and-advanced-setup/mega-menu-and-hover-mega-menu.md).

***

### Sticky header

When enabled, the header stays fixed at the top of the screen as the visitor scrolls down. This keeps navigation accessible without scrolling back up.

| Setting       | What it does                          |
| ------------- | ------------------------------------- |
| Sticky header | Enable or disable the sticky behavior |

<figure><img src="/files/7XkhewqEjJrgLJcsq3vm" alt=""><figcaption></figcaption></figure>

{% hint style="success" icon="sparkles" %}
**Tip:** Sticky headers work best when the header is compact. A tall header with a large logo takes up too much screen space when pinned.
{% endhint %}

***

### Related

* [Mobile Header](/docs/avante-themes/global-sections/header-and-navigation/mobile-header.md) — mobile-specific navigation
* [Menu Drawer](/docs/avante-themes/global-sections/header-and-navigation/menu-drawer.md) — slide-out navigation panel
* [Appearance settings](/docs/avante-themes/theme-settings/appearance.md) — navigation layout, sidebar mode, and transparent header
* [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md) — full setup guide


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/global-sections/header-and-navigation/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.