> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/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/unicorn-shopify-theme/section-groups/header/mobile-header.md).

# Mobile header

{% hint style="success" %}
The mobile header includes the following blocks: "[<mark style="color:blue;">Search button</mark>](/unicorn-shopify-theme/section-groups/header/mobile-header/search-button.md)", "[<mark style="color:blue;">Logo</mark>](/unicorn-shopify-theme/section-groups/header/mobile-header/logo.md)", "[<mark style="color:blue;">Cart button</mark>](/unicorn-shopify-theme/section-groups/header/header/header-buttons.md#cart-button)", and "[<mark style="color:blue;">Drawer</mark>](/unicorn-shopify-theme/section-groups/header/mobile-header/drawer.md)".
{% endhint %}

#### Layout

**Mobile**\
Set the logo direction: Logo centered or Logo on the left.

**Show bottom separator**\
Enable the option to display the dividing line underneath the header.

**Background**\
Select the color or paste your hex code.\ <mark style="color:orange;">**Note!**</mark> Change the transparency using the "Background opacity" scale described below.

#### Transparent header

{% hint style="warning" %}
**Note!** The transparent header works on the Home page and remains opaque on all other pages.
{% endhint %}

**Enable**\
Activates the transparent header.

**Invert colors on the first homepage section**\
When enabled, the Header elements (navigation menus, Search, Compare, Favourites, Account, and Cart icons) are linked to the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*.\
If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

<mark style="color:orange;">**Note!**</mark> Dynamic sections include the **"Use inverted header colors"** option, which temporarily changes the color of the Header elements when the Header overlays the section during page scrolling.

**Background opacity**\
Set the color transparency from 0 to 100:

* **0** - transparent
* **100** - opaque

<figure><img src="/files/7DB6HE6r09yJm7S81TX7" alt="" width="243"><figcaption></figcaption></figure>

#### Sticky effect

**Enable**\
Tick the option to activate the sticky header. Works on all devices.

**Hide on scroll down**\
The option disables the sticky header when scrolling down.