# Header

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FiRqXxYF2TGEo2NN1w2ys%2FPrimavera%20Distinction%202025-04-03%20at%202.37.40%20pm.jpg?alt=media&#x26;token=8fb7ae0d-c2a4-4d5f-93e5-61f905da494d" alt=""><figcaption><p>Header on the Savoir demo store, with a mega menu block assigned to "Shop"</p></figcaption></figure>

The header mostly contains settings related to the header bar itself and the desktop menus. Settings for the mobile navigation can be found in the [sidebar menu](https://docs.ultramarinastudios.com/sections/sidebar-menu) section.

{% hint style="success" %}
**Quick start**

* Create your desktop menu in **Content > Menus**, then select a **desktop menu** in the Customizer
* Choose your preferred **layout** (horizontal or vertical)
* Decide if you want to **use icons** or text for secondary menu items (cart, login)
* If you want to add **mega menus**, [follow this guide](https://docs.ultramarinastudios.com/guides/how-to-add-a-mega-menu)
  {% endhint %}

### Settings

* **Desktop menu**: [Create a menu](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus) and add it here. The theme will automatically create a nested navigation based on the menu structure, but you may wish to create more visually interesting menus by creating a mega menu block (see below).
* **Layout**:
  * **Layout (desktop)**: Choose between two different header styles on larger screens. On smaller screens, the header menu will always have the sidebar menu trigger on the right, and the logo in the center.&#x20;
    * The **horizontal** desktop layout features the main menu on the left, the logo in the center, and the secondary menu on the right.&#x20;
      * The **vertical** desktop layout features the site logo on the left, the main menu in the center and the secondary menu on the right.  \
        \
        Both menu types support dropdown and mega menus, but we recommend the **horizontal** desktop layout if you have a lot of top level links.
  * **Logo position (desktop)**: Choose between **center** or **left,** only if the layout is set to horizontal
  * **Open submenus on:** Choose between **hover** or **click.** Note that submenus will always open on click for touch devices.&#x20;
  * **Sticky header type:** The sticky behaviors are **none, always** and **on scroll up**. These options describe the conditions under which the sticky header is active. If you are using the **vertical** desktop layout or your header height is tall, we don't recommend using the **always** option as it may take up too much vertical space.
  * **Use icons instead of text**: Converts secondary menu links (such as the cart and login/account links) to be displayed as icons on the desktop layout.
  * **Enable mega menu overlay:** Adds an overlay to cover the rest of the site when a mega menu is open. This will only apply for mega menus, not regular dropdowns.
* **Transparent header:**
  * **Enable** **transparent header:** The header background becomes transparent when certain conditions are fulfilled. The first section on each page must be an imagery based section, such as a slideshow, image, or video banner section, in order for the header to be transparent. You can apply a specific color for the transparent header in the **colors** subsection.
  * **Enable blur on scroll:** Adds a subtle background blur behind the header only when it is transparent, creating a frosted glass effect on scroll
  * **Use alternate logo**: Enable this to display the [alternate logo](https://docs.ultramarinastudios.com/theme-settings/logo#alternate-logo) specified in theme settings.
  * **Text:** Choose the foreground color. For example, if you know that you'll be using only darker images underneath the transparent header, keep it as white (#FFFFFF).
* **Color scheme**: See [common settings](https://docs.ultramarinastudios.com/common-settings)
* **Padding**: See [common settings](https://docs.ultramarinastudios.com/common-settings)
* **Borders**: Enable to create more separation between your header and the rest of the page

### Mega menu blocks

{% columns fullWidth="false" %}
{% column %}

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fpjbat2PxzqlCRv78LzqN%2FPrimavera%20Precision%202025-04-01%20at%209.00.38%20pm.jpg?alt=media&#x26;token=dba14c7b-1df1-4ecf-8c86-952fb1d35988" alt=""><figcaption><p>The "Shop" mega menu on the <a href="https://primavera-precision.myshopify.com/">Primavera</a> demo store (horizontal header layout)</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FiRqXxYF2TGEo2NN1w2ys%2FPrimavera%20Distinction%202025-04-03%20at%202.37.40%20pm.jpg?alt=media&#x26;token=8fb7ae0d-c2a4-4d5f-93e5-61f905da494d" alt=""><figcaption><p>The "Shop" mega menu on the <a href="https://primavera-distinction.myshopify.com/">Savoir</a> demo store (vertical header layout)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text

To convert a regular dropdown in to a mega menu:

1. Add a new mega menu block&#x20;
2. Type the name of the item you wish to be a Mega menu in the **menu item** field. This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.
3. Choose a color scheme
4. There are two different layout options for the mega menu, which only apply if an additional color scheme is used.  When the **fade** layout is selected, the mega menu will fade to match the new color scheme. When the **split** layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.
5. When using the **vertical** header and the **fade** mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under **Settings > Logo > Alternate logo** and enable the **use alternate logo** checkbox to switch logos when the mega menu is active.
6. Add up to 3 promotion blocks. For each promotion:
   1. Image
   2. Image ratio
   3. Label
   4. Link

### Megamenu layout options

#### Megamenu with nested submenus and promo blocks

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FAL82YoKORHA65BBH1tw6%2Fmegamenu-images.webp?alt=media&#x26;token=110b6bbd-8e98-4e17-b22a-829cad40eb55" alt="Megamenu with nested submenus and promo blocks"><figcaption></figcaption></figure>

Choose which images, labels and text you want for your promo blocks. You can add up to three promo blocks per mega menu on desktop.

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FZ287QJnSDqz9dRJpRqK0%2Fimage.png?alt=media&#x26;token=bc8bb795-7a61-4765-92ec-c010804d8e8c" alt="" width="296"><figcaption><p>Settings for promo block 1</p></figcaption></figure>

#### Megamenu with nested submenus (available in v1.5.0+)

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FFClEIIxxvUPPnTrOsafC%2Fmegamenu-text.webp?alt=media&#x26;token=d74474dd-0e61-4dca-bc7d-2686b58da3d9" alt="Megamenu with nested submenus"><figcaption></figcaption></figure>

If you don't add any promo blocks submenu items will be spread across several columns. Second level menu items will be the headings, and third level menu items will be grouped under the second level items.

#### Megamenu with single level menu (available in v1.5.0+)

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FXMCLyAtOstqEjq2WSkZ6%2Fmegamen-brands.webp?alt=media&#x26;token=17cefd02-5a58-4e50-a082-756b81b9dee0" alt="Megamenu with single level menu"><figcaption></figcaption></figure>

If you don't add any third level menu items, menu items will be spread across the menu. This is great for a menu with a single hierarchy of items, such as a long list of brands.

### FAQ

<details>

<summary>Why can I only see the hamburger menu on desktop?</summary>

If your screen is on the smaller size or you've zoomed in, you might not be able to preview the desktop menu initially due to the customizer sidebar width. The breakpoint for the header is approximately 1216px (subject to your default font size), so smaller desktop screens may need to zoom out to see the correct layout. To zoom out, press control/command and the minus (-) key simultaneously on your keybard.

</details>