> 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

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

Upload your store's logo and adjust its size and alignment within the header.

{% 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.

![](/files/ZnDLJl83cR9AKLzYyPV5)
{% endhint %}

If you're using an overlap header, add an **Overlap logo** — it's typically white on a darkened background.

Alternatively, enter your store name if you are using a text-based logo. If no logo is uploaded, your store name will be displayed in the header by default.

#### Desktop Header Layout

The Volume theme includes six desktop header layouts:

<details>

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

<figure><img src="/files/1ut7Dd08kfi1GNNUMlND" 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="/files/kMGkUCdvvoY08vwsH24b" 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="/files/3TG7opHnOFowJW74U8zr" 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="/files/Y0KMEv4ehgUqnsTrrY6A" 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="/files/BwZxc08ron1dJufWnDXO" 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="/files/ZbMbsouUW8LgOpFi2iB5" alt=""><figcaption><p>The burger menu is enabled (Position: Left), and the search is displayed as a field.</p></figcaption></figure>

</details>

The configuration for the Mobile Header is described below.

#### Sticky Header

Choose between two types of sticky headers or disable the sticky behavior entirely.

***

### Menu Styles

The Volume theme offers multiple menu configurations:

#### 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="/files/8xyxHdBCnXcJ5usdQWwt" alt=""><figcaption></figcaption></figure>

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

Refer to the section below for [**Menu Drawer**](#menu-drawer) 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 from the corresponding menu selector in the theme settings.

<figure><img src="/files/hVc7ILDiHFtmeCvFLIJI" 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.

#### Two Menus

* Assign the **Secondary menu** in the Menu selector.
* Select a different catalog menu in the **Bottom Bar** settings.

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

{% hint style="info" %}
The **Menu** displays a menu with **secondary items**, while the **Bottom menu** shows the **catalog**.
{% 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="/files/isJEKgPXDlNjonZL4ks7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The **Use as parent menu** checkbox is enabled, while the **Bottom bar** has no menu selected.
{% 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 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/volume-themes/navigation/header-and-menu-styles.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.