> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/header/header.md).

# Header

Use the settings from the current section to build the Header as required.

## Header

{% hint style="success" %}
The **Header** includes additional subsections such as the [<mark style="color:$primary;">Topline</mark>](/triumph/header/header/topline.md), [<mark style="color:$primary;">Search</mark>](/triumph/header/header/search.md), [<mark style="color:$primary;">Menu dropdowns</mark>](/triumph/header/header/menu-dropdowns.md), [<mark style="color:$primary;">Badges</mark>](/triumph/header/header/badges.md), and <mark style="color:$primary;">Contact info</mark>.\
Hide any subsection by clicking on the eye icon that appears when a title is hovered over.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F8QMDqBriyNGs1u0gpIRn%2Fsections_eye%20icon.png?alt=media&amp;token=9ebdb9ac-0b56-4066-895c-db53079b7191" alt="" width="278"><figcaption></figcaption></figure>

**Logo position**\
Choose where the logo appears:

* Left
* Center

**Menu position**\
Choose where the navigation menu appears:

* Left
* Center

Combine these settings to create different layouts:

* **Logo left + Menu left** – Logo followed by the menu.
* **Logo left + Menu center** – Logo on the left, menu centered.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQXwNCfQc3VjvycPM4Emx%2Fheader_left%20%26center.png?alt=media&amp;token=69dc6add-0429-4898-9bec-f44391208892" alt=""><figcaption></figcaption></figure>

* **Logo center + Menu center** – Centered logo with menu below.
* **Logo center + Menu left** – Centered logo with menu aligned left.

### Layout

**Sticky header**\
Control how the header behaves when scrolling:

* **None** – Sticky header is disabled.
* **On scroll up** – Appears only when scrolling up.
* **Always** – Always visible while scrolling.

**Disable sticky header on mobile**\
Turns off sticky behavior on mobile devices.

**Sticky bottom shadow**\
Adds a subtle shadow below the header.

**Bottom shadow on mobile**\
Choose when the shadow appears:

* **None** - Shadow is disabled.
* **Show on subpages only** - Disabled on the Home page, while keeping it on all other pages.
* **Show always** – Always visible.

### Utilities

{% hint style="success" %}
The features described below appear in the [<mark style="color:$primary;">Topline</mark>](/triumph/header/header/topline.md).
{% endhint %}

**Country/region selector**

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Displays a country/region selector (requires store market setup).\
Read more information in the '[<mark style="color:$primary;">Markets</mark>](https://help.shopify.com/en/manual/markets-new)' help page.
{% endhint %}

> *Required steps:*
>
> 1. Apply settings in *Shopify admin -> Settings -> Markets*.
> 2. Turn on the optionin the current section.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fm897I7vMmtyuKSVo5rCX%2Fheader_country%20selector.png?alt=media&amp;token=081370a4-bb74-4a48-874e-9d3b3eb7fb1d" alt=""><figcaption></figcaption></figure>

**Language selector**

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Displays a language switcher (requires a translation app).\
Read the '[<mark style="color:$primary;">Localization and translation</mark>](https://help.shopify.com/en/manual/international/localization-and-translation)' help page for the details.

**Recommended app:** Shopify Translate & Adapt app
{% endhint %}

> *Required steps:*
>
> 1. Install the app and apply the desired configurations.
> 2. Enable the option in the current section.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FKccXvumVEpDe2Y53nEIO%2Fheader_language%20selector.png?alt=media&amp;token=08115234-34c6-4ac5-bab8-612825072bf5" alt=""><figcaption></figcaption></figure>

**Social media links**

> *Required steps:*
>
> 1. Link social accounts in *Theme settings ->* [*<mark style="color:$primary;">Social media</mark>*](/triumph/theme-settings/theme-settings.md#social-media).
> 2. Activate the option in the *Header*.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FmGrPAmrkiDisotLYUJ1r%2Fheader_social%20media.png?alt=media&amp;token=94131eec-6e90-402e-ae4b-42c515321e3a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** On mobile devices, selectors and social icons appear under the Menu drawer once the hamburger icon is pressed.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FjMYoMa6jT8dHlK3b1CYB%2Fheader_mobile%20content.png?alt=media&amp;token=1d00d206-99b4-4ab1-9225-eb6751f125c2" alt=""><figcaption></figcaption></figure>

**Open search**

{% hint style="success" %}
Additional settings are available in the [<mark style="color:$primary;">Search</mark>](/triumph/header/header/search.md).
{% endhint %}

Control how search appears in the header:

* **Enabled** – Displays the *Search bar* on the right side of the navigation menu.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FCoSmszhOUlxkpPZCUcEe%2Fheader_open%20search.png?alt=media&amp;token=7d07548c-725f-4b8c-85e2-265274c75b11" alt=""><figcaption></figcaption></figure>

* **Disabled** – Shows the search icon instead, alongside other header icons.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FJZGu0Mpr2k47wl8TXBQO%2Fsearch_icon.png?alt=media&amp;token=d2c9dc2c-2f37-44ac-b469-5ddd046d0ac0" alt=""><figcaption></figcaption></figure>

### Customer account

Control how customer accounts appear and behave in your store.

{% hint style="warning" icon="alarm-exclamation" %}
Manage whether the customer account option is shown.

**Note!** Legacy customer accounts are not supported.
{% endhint %}

**Login type**\
Choose how customers sign in:

* **Popup** – Opens a login pop-up without leaving the page.

**Menu** *(Pop-up only)*\
Select a menu to display within the customer account pop-up.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FEaKoLjNyPWgzB7Mhqx4V%2Fheader_account%20popup.png?alt=media&amp;token=41ab38c6-8ebb-4b55-9009-ba05b42be508" alt=""><figcaption></figcaption></figure>

* **Login page** – Redirects to a separate login page.

### Color

{% hint style="success" %}
To set specific colors for tab labels and top menu items, use the settings in the [*<mark style="color:$primary;">Tab item color</mark>*](#tab-item-color) and [*<mark style="color:$primary;">Menu item color</mark>*](#menu-item-color) section groups.
{% endhint %}

**Text / Text hover**\
Set colors for tab labels, top menu items, and header icons (Contact info, Account, Cart, and Search).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F8Itn9wnwopuJPDBlroa1%2Fheader_text%20color.png?alt=media&amp;token=5d799225-4d0d-4f90-9057-fb1b80a549df" alt=""><figcaption></figcaption></figure>

**Background**\
Set the main header background color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FhGFodYKdhUn4yOYdsUdu%2Fheader_background%20color.png?alt=media&amp;token=374e1c7d-73ec-45d8-bd6d-632e22cd09db" alt=""><figcaption></figcaption></figure>

**Tabs and navigation bar background**\
Set the background color for the second header line (when the [<mark style="color:$primary;">Tab navigation</mark>](/triumph/header/header/tab-navigation.md) is enabled).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FYZaKmt4AK4jyWTqbK3dV%2Fheader_tabs%20background%20color.png?alt=media&amp;token=5a070617-e42e-4c39-9538-6ed4c9796411" alt=""><figcaption></figcaption></figure>

### Tab item color

**Text / Text hover**\
Set colors for tab labels.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FUFfRVLbydAk2nah631qQ%2Fheader_tab%20colors.png?alt=media&amp;token=be376844-afb8-469a-8f4b-05cbfd34b124" alt=""><figcaption></figcaption></figure>

### Menu item color

**Text / Text hover**\
Set colors for top menu links.

**Show background on hover**\
Highlights menu items when hovered.

**Background hover / active**\
Set the highlight background color

**Background gradient hover / active**\
Apply a gradient effect to the highlight.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FoBztUyASuux3Q3B0lRdZ%2Fheader_menu%20item%20color.png?alt=media&amp;token=0e3a2903-9c07-42cd-853d-884d63913128" alt=""><figcaption></figcaption></figure>