> 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/volume-themes/navigation/header-and-menu-styles.md).

# Header & Menu Styles

Configure the Volume header: choose from six desktop layouts, four menu styles (burger, single, two menus, smart category), and enable sticky header behavior.

In this section, you'll find information about different types of navigation and how to configure them in the Header, Menu Drawer, and other sections.

{% hint style="success" icon="lightbulb" %}
To configure navigation in your store, you need to create and manage menus. You can do this in your Shopify admin panel by going to **Content → Menus**. For detailed instructions on managing menus, refer to the [Shopify manual](https://help.shopify.com/en/manual/online-store/menus-and-links).
{% endhint %}

***

### Header

Learn how to customize the header and tailor it to your business needs.

#### Logo

The logo is a **block** inside the Header section, not a section setting — open the **Logo** block in the Header's block list.

* **Logo type** — **Image** or **Text**.
* **Logo** — upload your store's logo.
* **Overlap logo** — used when the header overlaps the first section; it's typically a white version for a darkened background.
* **Desktop logo width** and **Mobile logo width**.
* For a text logo: **Font**, **Desktop font size**, **Mobile font size**.

If no logo is uploaded, your store name will be displayed in the header by default.

{% hint style="success" icon="lightbulb" %}
Ensure that the uploaded logo file is cropped properly, meaning it does not contain extra space around it. Otherwise, the logo may appear too small.

<img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FpdS1tQYi1yprahipNlmP%2Fimage.png?alt=media&#x26;token=2597988d-8771-4f7d-865d-75c0d9687949" alt="" data-size="original">
{% endhint %}

#### Desktop Header Layout

The **Header layout** setting offers six desktop layouts:

<details>

<summary><strong>Logo left, menu left</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2F9OGRQWUeXKGmgwhoJujJ%2Fimage.png?alt=media&#x26;token=391c0b83-58e6-44cb-a8c5-9d474307a5a9" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

<details>

<summary><strong>Logo left, menu center</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FdWuUDvlDhlBpyETyOPYU%2Fimage.png?alt=media&#x26;token=d839afbf-a6fd-417b-9eb5-f4ceb1b8725e" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

<details>

<summary><strong>Logo left, wide search</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FLTg10qrBtmETdbeNA6ln%2Fimage.png?alt=media&#x26;token=2cb7f333-a276-4e46-8784-d72062bdf1f0" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

<details>

<summary><strong>Logo center, menu left</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2Fnod6lGtGdwElFIWF4vIB%2Fimage.png?alt=media&#x26;token=e18b8cb2-bce5-4c0c-a172-e2690d40ca58" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

<details>

<summary><strong>Logo center, menu split</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FWdkg89NWsOsfokLveqXt%2Fimage.png?alt=media&#x26;token=3e90839a-b982-4c66-a5f2-7c11aab79bea" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

<details>

<summary><strong>Logo center, search left</strong></summary>

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FKh5c3ULnc4nxTO4e5I3W%2Fimage.png?alt=media&#x26;token=dcd574ec-fa22-4edb-8332-290163e43e97" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

{% hint style="warning" %}
**Search** set to **Field** is incompatible with the **Logo left, wide search** and **Logo center, search left** layouts — those two layouts already place a wide search field in the header themselves.
{% endhint %}

#### Mobile Header Layout

Under the **Mobile layout** heading there is a separate **Header layout** setting with three options:

* **Logo left, burger menu left**
* **Logo left, burger menu right**
* **Logo center, burger menu left**

**Enable search field** adds a search field under the mobile header.

#### Sticky Header

**Sticky header** has three options:

* **Disabled**
* **On scroll to top** — the header reappears when the customer scrolls up.
* **Always** — the header stays pinned at all times.

***

### Menu Styles

The Volume theme offers multiple menu configurations:

{% hint style="warning" %}
**Mobile navigation always goes through the Menu Drawer section** — regardless of which Menu Style you pick below for desktop (Single Menu, Two Menus, or Smart Category Menu). The mobile burger icon always opens the Menu Drawer, so if the mobile menu looks empty or wrong, check the [**Menu Drawer**](/docs/volume-themes/navigation/menu-drawer.md) section, not the Header's menu selector.
{% endhint %}

#### Burger Menu

A simple approach where the navigation is entirely inside the Menu Drawer. Clicking the burger menu icon opens the drawer.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2F7FGTvzkdemyXNqu2SwPE%2Fimage.png?alt=media&#x26;token=83ea2669-b06a-4e0c-a239-7d30b5692239" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Menu** and **Bottom bar** have no menus selected, but the **Burger menu** is enabled.
{% endhint %}

The **Burger menu** heading in the Header section controls the icon only:

* **Show burger**
* **Hide on mobile** — hidden icons can be added to the **Mobile dock** section under **Overlay group**.
* **Burger** — **Icon**, **Icon with text** or **Text**.
* **Position** — **Left** or **Right**.

The contents of the drawer live in a different section: refer to [**Menu Drawer**](/docs/volume-themes/navigation/menu-drawer.md) for setup instructions.

#### Single Menu

A common setup where a single menu is used, with a Shop dropdown containing product categories.

To set this up, select a pre-configured menu in the **Menu** selector of the Header section.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FvkrWMneyfGL6XAGNAcoW%2Fimage.png?alt=media&#x26;token=c780fcf7-b85f-4670-b8f2-814478ea1a49" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Menu** with **nested items** has been added, along with a **Mega menu** block.
{% endhint %}

Refer to the [**Mega Menu**](/docs/volume-themes/navigation/mega-menu.md) article for setup instructions. Remember to also set up the [**Menu Drawer**](/docs/volume-themes/navigation/menu-drawer.md) for mobile — this menu style only applies to desktop.

#### Two Menus

* Assign the secondary menu in the **Menu** selector.
* Select a different catalog menu in the **Menu** selector under the **Bottom bar** heading.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FhwbXMOQPqGOsahJEvfrq%2Fimage.png?alt=media&#x26;token=d1b1a9e8-6137-492a-a80d-9a1a07a5dd9c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The **Menu** displays a menu with **secondary items**, while the **Bottom bar** shows the **catalog**.

Both menus have their own set of styling settings — dropdown icon, link style, uppercase, bolder font, alignment and gap — so the two rows can look completely different.
{% endhint %}

#### Smart Category Menu (Top-Level Category Navigation)

If your store has 2–4 top-level categories (e.g., gender/audience-based: **Men / Women / Kids** or department-based: **Clothing / Shoes / Bags**), the [**Smart Category Menu**](/docs/volume-themes/navigation/smart-category-menu.md) feature can significantly enhance the UX.

1. Have kind of **separate Home pages** for each **top-level category** — each with its own relevant sections. With a **dynamic bottom menu** based on which top-level category item the user selects.
2. Add a **third nested menu level** in addition to Shopify's standard two levels.
3. Display the top-level category as part of the **breadcrumb** path to make it easier to navigate back to broader categories without confusion.
4. Optionally, build a **minimalist homepage** that directs users to one of the top-level categories.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FfRuULQesPArrE0Elkl42%2Fimage.png?alt=media&#x26;token=43e92dd5-a8b5-4682-8fc8-14c60520885d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The **Smart Category Menu** checkbox is enabled, while the **Bottom bar** has no menu selected.

The checkbox sits right under the **Menu** selector and only appears once a menu is chosen there.
{% endhint %}

See [**Smart Category Menu**](/docs/volume-themes/navigation/smart-category-menu.md) for the 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/navigation/header-and-menu-styles.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.