# Header

{% hint style="success" %}
**Tip:** Check the extended list of options for the Header in *Theme settings ->* [*<mark style="color:blue;">Logo and favicon</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/logo-and-favicon)*.*
{% endhint %}

The Unicorn theme provides six blocks to customize the Header: "[<mark style="color:blue;">Menu icons</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/menu-icons)", "[<mark style="color:blue;">Badges</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/badges)", "[<mark style="color:blue;">Popup menu</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/popup-menu)", "[<mark style="color:blue;">Image with button (Mobile)</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/image-with-button-mob)", "[<mark style="color:blue;">Featured promotion (Mobile)</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/featured-promotion-mob)", and "[<mark style="color:blue;">Contacts</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/contacts)".

{% embed url="<https://www.youtube.com/watch?v=H8r9AQ-BwQs>" %}

## Header - classic

{% hint style="success" %}
**Tip:** If a layout does not come with the section, it can be added manually by pressing the **"Add section"** button or hovering over a space between sections to see the **"+"** icon and choosing it from the proposed list of sections.
{% endhint %}

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

If the **"Open dropdowns on click instead of hover"** option is enabled, the drop-down menu will only be available for viewing by clicking a menu item.

Activate the **"Enable button tooltips"** option to display tooltips below header icons in the desktop view when hovering over them, such as Search, Account, and Cart.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FF3CUzf2PwiInkGmEKzKy%2Fheader_tooltips.png?alt=media&#x26;token=e68a2173-13e2-4a98-928b-0770c00bb55a" alt=""><figcaption></figcaption></figure>

<mark style="color:orange;">**Note!**</mark> The described option will only work for the inline [Icons menu](#menu-type).

Use the **"Bottom line separator"** drop-down to add or remove the dividing line underneath the Header on desktop and mobile:

* **"Hide"**. Select the option to hide the dividing line on both desktop and mobile.
* **"Show"**. Set the option to display the separator on all screen sizes.
* **"Show on desktop only"**. Use the provided option to display the separator on the desktop and deactivate it on mobile.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FNCRs741Jk0T3GlKIyC1p%2Fheader_line%20separator.png?alt=media&#x26;token=83b06bc9-5502-4510-b0da-e1662bbfe5ee" alt=""><figcaption></figcaption></figure>

The background of the first Header line can be changed by changing the color in the **"Background"** picker.

The color of the account, search, and bag icons changes for all screen sizes after applying a hex code in the **"Buttons"** picker. Additionally, this picker applies color to the hamburger icon on mobile.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FXU9ArbTzjRbEeVSBs9UP%2Fheader_colors.png?alt=media&#x26;token=be063f55-e52a-417b-813c-0f0ee24f2bf4" alt=""><figcaption></figcaption></figure>

The **"Cart counter"** item determines the background color for the number of products displayed next to the cart icon in the Header when items are added to the Cart. The digit color will be adapted to contrast with the selected background color. To customize the digit color, go to *Theme settings -> Colors ->* [*<mark style="color:blue;">Contrast</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#contrast) and use the appropriate color picker.

The theme allows displaying two menu lines that can be set in the **"Text menu"** and **"Icons menu"** selectors. Let's dive into the topic more:

### Text menu

To display the text menu, turn on the **"Enable"** option. Once you activate the option, the related settings will be shown to customize the menu.

Here you can choose the proper menu in the **"Navigation"** selector. It will be placed in the first header line above the Icons menu. Press the **"Select"** button to use the one from the list. Confirm that the menu has been created in *Shopify admin -> Content -> Menus*. Read the instructions on how to add drop-down menus in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links).

Use the **"Color"** and **"Hover color"** color pickers to set up the colors of the active and inactive menu items.

This is how the **"Text menu"** might be displayed in your store:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FuezhS4LoKRvJVCd8Gaib%2Fheader_text%20menu.png?alt=media&#x26;token=951b649f-f9d9-4ed2-a777-745a5d1eb8d0" alt=""><figcaption></figcaption></figure>

### Icons menu

{% hint style="success" %}
**Tip:** To customize the **"Icons menu"**, add the **"Mega menu"** sections and related blocks in the "Mega menu" section group. Read more about the "Mega menu" section in the following [<mark style="color:blue;">article</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/mega-menu).
{% endhint %}

Turn on the **"Enable"** option to display the corresponding menu selector with the list of settings related to this menu.

In the **"Main navigation"**, choose the menu for the icons drop-down. The *Main Menu* will be shown by default, which you can replace with any other menu created in *Shopify admin -> Content -> Menus*. Read the instructions on how to add menus [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links).

#### Type

Use the following picker to change the layout of the Icons menu on the desktop. It can be changed to display as "**Inline"** or **"Popup"**. The corresponding settings for each option will be displayed after selecting the desired type.

Here are the examples of the menu types:

{% tabs %}
{% tab title="Inline" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7dmpgrgm4axi8eg1wvyZ%2Fheader_inline.png?alt=media&#x26;token=98910037-3afc-4107-9f7f-18ce5344337a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Popup" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVfO9DfRiJT1qj5V2bVrp%2Ficons%20menu_popup.png?alt=media&#x26;token=ca441a04-8f5d-4d3c-8755-0c1d5732b896" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Inline settings:**

Turn on the **"Animate icon and text"** option to activate the animation effect that swaps the position of an icon/image with the menu item name when hovering over an icon menu. On hover, the menu item name moves to the top, and the icon/image shifts to the bottom. This feature is compatible with the [<mark style="color:blue;">Inline</mark>](#menu-type) menu type.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fb0yjP6DtV4m5kopoYLyX%2Fheader_animate.png?alt=media&#x26;token=0a222c91-c611-4396-933b-81b591ed70d9" alt=""><figcaption></figcaption></figure>

To display the dividing line between the main and secondary menus, activate the **"Show top separator line"** option.

Here you can change the color of the elements: **"Text"**, **"Icon"**, **"Background"**, **"Border"**,  **"Hover text"**, and **"Border and hover background"**.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FYbksTr8m1pqElOgoPbbg%2Fheader_inline%20colors.png?alt=media&#x26;token=05b38bc9-443c-4af0-b81b-76c76ff0eee5" alt=""><figcaption></figcaption></figure>

The **"Corner radius"** scale lets you control whether to use square corners for the Icons menu or display rounded angles. Use values from 0 to 40 pixels to set the icon menu size that meets your needs.

If you need to display a border around the icon boxes, use the **"Border width"** scale, which ranges from 0 to 10 pixels.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVC87yaByggjfBxkT5V57%2Fheader%20inline_border.png?alt=media&#x26;token=18a75bc2-30c0-4c35-b069-d346564d601b" alt=""><figcaption></figcaption></figure>

* **Popup settings:**

**Align to button**

Activate the option to showcase the pop-up menu beneath the "Categories" button by clicking on it. Otherwise, the pop-up will cover the button when opened.

In the following example, the option is disabled, and the pop-up overlays the "Categories" button:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FEBFqnwuloUF04WNTDTHo%2Fpopu_aligh%20to%20button.png?alt=media&#x26;token=c890c1e6-4383-4a1c-87f2-ca0468f71df9" alt=""><figcaption></figcaption></figure>

**Enable full width**

Activate the option to display the Mega menu with the nested menu items or banners in the full width of the menu.

Activate the **"Set height"** option to display the **"Height"** scale to adjust the pop-up height from 0 to 1000 pixels.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FvucaUNCWWIVUYREV5rJE%2Fheader%20popup_size.png?alt=media&#x26;token=06dc3ff8-8de7-44c7-8f70-64186fac9354" alt=""><figcaption></figcaption></figure>

To display the dividing line between the main and secondary menus, activate the **"Show top separator line"** option.

Here you can change the color of the elements: **"Text"**, **"Icon"**, **"Background"**, **"Border"**, **"Hover text"**, and **"Border and hover background"**.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FamAjEAUBnb12fM02DqAO%2Fheader%20popup_settings.png?alt=media&#x26;token=34de0eb6-55d4-46c5-865e-bc63144afd94" alt=""><figcaption></figcaption></figure>

The color of the vertical line separator between the categories and search field in the Search bar can be modified using the **"Search-categories border"** color picker. This option works only for the [Popup](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#menu-type) menu type.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FOuwNq3mxRVUfryeg1JcO%2Fheader_search%20border.png?alt=media&#x26;token=abb1ecf1-cd91-4eda-87aa-aebaa47070d0" alt=""><figcaption></figcaption></figure>

Here is how the Header might display on a desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F3CIqqeIoMNbi0E44v4Lw%2Fheader_desktop.png?alt=media&#x26;token=a7231ac7-60cc-4f9b-91a3-7bb5bf2dd400" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FipnMDqI7HtKbQmhJkd5Z%2Fheader_mobile.png?alt=media&#x26;token=7a6e53d5-23c8-4bb2-acfb-032d0c7ea49c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Note!** The menu items are visible on mobile in the slide-out pop-up when pressing the menu button in the Header section.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FaAXcRrWjDJcaQu3TbCbS%2Fheader_popup%20mobile.png?alt=media&#x26;token=35e86dc4-733a-4016-8e05-01cd684fba74" alt=""><figcaption></figcaption></figure>

***

## Header - transparent

{% hint style="success" %}
**Tip:** If a layout does not come with the section, it can be added manually by pressing the **"Add section"** button or hovering over a space between sections to see the **"+"** icon and choosing it from the proposed list of sections.
{% endhint %}

Activate the **"Invert colors for homepage first section"** option to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "[<mark style="color:blue;">Background</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#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>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#base)" item.

<mark style="color:orange;">**Note!**</mark> The dynamic sections include the **"Invert header colors"** option, which adapts the color of the Header elements for a specific section when scrolling up or down the Home page.

Enable the **"Open dropdowns on click instead of hover"** option to display the drop-down menu when a top menu item is clicked.

Use the **"Enable option tooltips"** option to display tooltips below header icons in the desktop view when hovering over them, such as Search, Account, and Cart.

Show the Header across the full width of the screen by turning on the **"Enable full width"** option.

### Layout

In the **"Desktop"** drop-down, specify the Header design: **"Logo left"**, **"Logo center"**, **"Logo and menu left"**, **"Menu center"**, or **"Menu and logo center"**.

{% tabs %}
{% tab title="Logo left" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F6q8mICttdI3cxSNo75b0%2Ftransparent%20header_logo%20left.png?alt=media&#x26;token=33a715db-895f-4737-a101-a20305e66c51" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FKFMsjourhXeoEDs3NBIT%2Ftransparent%20header_logo%20center.png?alt=media&#x26;token=2694d53a-3e95-4f94-acda-479207922619" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo and menu left" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FpJlYqSxUS3rGWLHETZG7%2Ftransparent%20header_logo%20menu%20left.png?alt=media&#x26;token=ec0e711f-c7f9-4c07-84b4-d5cf32951bbe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Menu center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FSlj1AZoD0OZSt2G3G9tX%2Ftransparent%20header_menu%20center.png?alt=media&#x26;token=090e5f1a-ee95-4f17-8599-04bb1add2826" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Menu and logo center" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVtB5GxIqHnBxlKDCpaAX%2Ftransparent%20header_menu%20logo%20center.png?alt=media&#x26;token=f689af75-8a3f-4b85-9466-c6b246ee8bb3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The **"Split menu after"** option appears in the settings panel if the "Menu and logo center" is selected.

Enable the **"Split menu after"** option to reveal the corresponding scale, which ranges from 1 to 12, and defines how many top menu items appear before the logo, with the remaining items displayed after the split.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4CeVvxGE3SLUUzHGCpX5%2Ftransparent%20header_split%20menu.png?alt=media&#x26;token=9131ecd1-a1a8-4173-bfd9-ba38b038f7b3" alt=""><figcaption></figcaption></figure>

Set the logo position on mobile to "Logo center" or "Logo left" by using the **"Mobile"** picker.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fz9JLd2Yg4335sPq7KyDO%2Ftransparent%20header_mobile.png?alt=media&#x26;token=1514c30a-d059-49d5-a731-186d0230c786" alt=""><figcaption></figcaption></figure>

### Sticky effect

In the **"Type"** picker, specify whether to display or hide the sticky header when scrolling down or up a page by selecting the "Disable" or "Enable" options. This functionality only applied to the desktop.

Tick the **"Enable on mobile"** option to activate the sticky Header on mobile.

The **"Hide when scrolling down"** option disables the sticky Header on all devices when scrolling down.

### Logo

Use the **"Type"** picker to specify which logo method to apply: "Image", "SVG", or "Text". The corresponding options appear after selecting the type:

* **"Image"**. Select the option to set up a logo in your store using an image. Specify an image in the **"Logo"** picker. Press the "Select" button, then choose an image from the library or upload it from your device.
* **"SVG"**. Activate the option to show the **"SVG logo"** input field, where you can place your SVG code.

The **"Image"** and **"SVG"** options additionaly provide the following settings to customize the Logo on desktop and mobile:

Use the **"Width"** slider to control the logo size in the Header from 20 to 300 pixels. This option controls the Logo size for all screen sizes.

To set width settings individually for mobile, activate the **"Enable mobile width limit"** option. The option enables width scaling for mobile devices.

Change the logo size on mobile from 0 to 280 pixels using the **"Mobile width"** scale.

* **"Text"**. This option generates the default logo text, which corresponds to the store name specified in your admin.

### Text menu

Turn on the **"Enable"** option to display a navigation menu in the Header. Additionally, this option reveals the "Menu" source selector.

Specify a menu in the **"Menu"** source selector. Confirm that the menu has been created in *Shopify admin -> Content -> Menus*. Read the instructions on how to add drop-down menus in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links).

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FQJtydc5HgmRgCmwUyCRf%2Ftransparent%20header_menu.png?alt=media&#x26;token=578bf69d-a804-4cd9-a2a7-1b4bbc63d93d" alt=""><figcaption></figcaption></figure>