---
description: >-
  In this section, you can configure the Mega menu according to your needs:
  choose Type, Colorize style, menus for Vertical and Horizontal view, and add
  content blocks.
---

# Header

{% hint style="info" %}
**Sections -> Header**
{% endhint %}

{% embed url="https://www.youtube.com/watch?v=pG3Y5yZmcKk" %}

#### Video manual list

* [<mark style="color:blue;">How to add and edit a vertical menu</mark>](https://www.youtube.com/watch?v=HUx37I6Wbws\&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df\&index=6)
* [<mark style="color:blue;">How to add and edit a horizontal menu</mark>](https://www.youtube.com/watch?v=1pwt8f4o8M0\&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df\&index=7)

### Header Type

&#x20;In this section, you can choose the header type. There are 7 header types:

{% tabs %}
{% tab title="Type #1" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUgAIQAapyUj-HspUu%2F-MeUj0hYup3eNbwKRAcv%2FScreenshot_5.png?alt=media\&token=6a3eccdf-78f2-4659-8ec6-59f962185a35)
{% endtab %}

{% tab title="Type #2" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUgAIQAapyUj-HspUu%2F-MeUjkeFaGsQUjmBmBFN%2FScreenshot_6.png?alt=media\&token=efb178d0-e33b-4429-a396-cf2eec167704)
{% endtab %}

{% tab title="Type #3" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUgAIQAapyUj-HspUu%2F-MeUlD5PmbTePrDRGmfG%2FScreenshot_7.png?alt=media\&token=abf5097c-b0a0-4bc0-9cba-e8065f8c2ecb)
{% endtab %}

{% tab title="Type #4" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUmMXX6Kb_ap-ZGHNW%2F-MeUnAZtuKOYABnGvljr%2FScreenshot_8.png?alt=media\&token=02393002-e113-44a7-8c08-72b18e4a6299)
{% endtab %}

{% tab title="Type #5" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUnJUWnrJMvpdDB24n%2F-MeUnwsmxfNlG6-86Tjz%2FScreenshot_9.png?alt=media\&token=bef581f4-6efa-4718-94fc-6816f7ca6d19)
{% endtab %}

{% tab title="Type #6" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUnJUWnrJMvpdDB24n%2F-MeUoOqoY9xcJ7rWcFTc%2FScreenshot_10.png?alt=media\&token=d545e8f2-9895-474e-a40a-21ca0059a08d)
{% endtab %}

{% tab title="Type #7" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUnJUWnrJMvpdDB24n%2F-MeUoeiSSn-kYFeighli%2FScreenshot_11.png?alt=media\&token=babc4576-4c02-48da-a8b1-3c168923b387)
{% endtab %}
{% endtabs %}

### Colorize style <a href="#style" id="style"></a>

&#x20;Here you can choose one of the proposed Colorize styles. The theme includes 4 styles:

{% tabs %}
{% tab title="Style #1" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUoi42VUuAHm3XhDdm%2F-MeUqAcfKHL8GzBhbBb-%2FScreenshot_12.png?alt=media\&token=646d47cd-a269-4196-97a6-880d3d7835b9)
{% endtab %}

{% tab title="Style #2" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUoi42VUuAHm3XhDdm%2F-MeUqdxr96vIGdh44jCs%2FScreenshot_13.png?alt=media\&token=ea735a3f-dba5-4b2b-a097-d80350f98032)
{% endtab %}

{% tab title="Style #3" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUoi42VUuAHm3XhDdm%2F-MeUqhWOzbD7gXsN_ekQ%2FScreenshot_14.png?alt=media\&token=489c25bd-5463-4c67-b3e4-1c7100787f8b)
{% endtab %}

{% tab title="Style #4" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUoi42VUuAHm3XhDdm%2F-MeUrL3WdsZJkgrloVHs%2FScreenshot_15.png?alt=media\&token=7164016a-896a-4cb8-97d4-9b31b778988b)
{% endtab %}
{% endtabs %}

### Transparent background

&#x20;Here you can decide whether to apply transparency to the Header.

{% hint style="warning" %}
**Please note**, this option works for the desktop only. The transparent header background will be disabled on mobile by default.
{% endhint %}

&#x20;In the dropdown list choose if to show it as **“Transparent”** or **“Transparent and colorize on hover”**. These settings will be applied only to the Home page. The Header will have an additional background on all other pages. The background of the Header can be changed by selecting its Colorize style (read the details above) or by adding the dynamic block **“Colorize”**. How to configure colors, especially for the Header, you can read [<mark style="color:blue;">**here**</mark>](content#colorize). If you want to deactivate the option, select **“Disable”**.

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://shella-demo5.myshopify.com/)
{% endhint %}

### Centered logo on mobile <a href="#style" id="style"></a>

&#x20;Enable an option if you want the Logo to be displayed in the center on mobile.

{% hint style="warning" %}
**Please note**, you should check if the icons do not overlap the Logo on mobile view. Centering doesn't check the position of the icons.
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FxXIFYxV3UBr17P7O6dx9%2Fheader_logo_mobile.png?alt=media\&token=d0a64708-7dcd-43e8-a48e-6a7334ba6c67)

### Top line height (only desktop)

&#x20;In order to change the top line height for the desktop, use the scale from 0 to 200 px, where 0 is an auto-size.&#x20;

&#x20;We changed the line height to 100 px in our example, and this is what we have got:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeO8KJHlMUQbJMMwSbM%2F-MePPq4ympqQbwaXUR1N%2FScreenshot_1.png?alt=media\&token=51c8b1d9-1a3c-4bc3-b421-87c1db1857c4)

### **Horizontal padding of items**

&#x20;In the **“Horizontal padding of items”** scale you may decide the distance between the first-level Menu items in the Header. You can use the scale from 0 to 30 px to change the paddings:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MePPtInuvSM9yOhf4kf%2F-MePSymSoZqAh9zqSphI%2FScreenshot_2.png?alt=media\&token=424acf95-e885-4ba8-819a-f5152da07cc9)

## Main Menu

### Select menu

&#x20;In this section, you can select a menu, that will be used in the header. This menu needs to be created in your _Shopify Admin -> Content -> Menus_ first and then it can be selected, changed, or edited. How to create such a menu you can read [<mark style="color:blue;">**here**</mark>.](https://help.shopify.com/en/manual/online-store/legacy/menus-and-links/editing-menus)

&#x20;This is what the main menu looks like in your Shella theme:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUsBUcxsFoBnRAmEPA%2F-MeUtyM8LWunSbMzvpBL%2FScreenshot_17.png?alt=media\&token=ab98afbb-05d2-4cde-9723-1121ad4c8a3b)

&#x20;And this is how the main menu looks like in your Shopify Admin:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MfmAguZZs4aQFQni4HY%2F-MfmBja6_0Ewa9JlNJcv%2FScreenshot_18.png?alt=media\&token=16a97ab3-5403-4b83-ae74-faf3e850c50b)

### **Show arrows on first levels**

&#x20;If you enable this option, the arrows will be shown on the first levels of the main menu:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUsBUcxsFoBnRAmEPA%2F-MeUu2ihO7Uq-qtn-i7T%2FScreenshot_18.png?alt=media\&token=65e87d11-4e5f-4f12-a3b9-000974bfaed7)

### **Show underline on item hover**

&#x20;If you enable this option, the menu item text will be underlined when the mouse cursor hovers over the top menu item name.

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUsBUcxsFoBnRAmEPA%2F-MeUuA-ocAyNrtydWZZ7%2FScreenshot_19.png?alt=media\&token=4b95d01a-9c82-45aa-ad75-39d3c23c9348)

## Vertical Menu

### Select vertical menu

&#x20;A vertical menu is available for the header type # 5 and type # 7 only. In this section, you can select a menu, that will be used in the vertical menu. This menu needs to be created in your _Shopify Admin -> Content -> Menus_ first and then it can be selected, changed, or edited. How to create such a menu you can read [<mark style="color:blue;">**here**</mark>.](https://help.shopify.com/en/manual/online-store/legacy/menus-and-links/editing-menus)&#x20;

### **Fixed vertical menu on home page**

&#x20;If you choose this option, you need to add the 'Space for vertical menu' block in the 'Builder' section for the vertical menu to have its own space. To do so choose the _Home page_, then go to _Builder._ Otherwise, the menu will be over the other content on the home page.

&#x20;**1. Add “Space for vertical menu”:**&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MfhIKK_OwiJTa_8os3B%2F-MfhLyA-t4EN4MPA1pLv%2FScreenshot_6.png?alt=media\&token=1a558aeb-1d69-4911-89e1-38569b38fe8b)

&#x20;Once you click on “Space for vertical menu” a new block will appear, where you will need to select the menu. Once you select the menu the name of this block will be automatically renamed from “Space for vertical menu” to the name of the menu you select. Make sure, that this block is on the very top, over all other blocks in the content section. It can be dragged when clicking on the Shopify default button and reordered to the needed place.

&#x20; **2. Fixed vertical menu on the home page**

&#x20;If you want your vertical menu to be displayed as a fixed menu without a dropdown list, you can enable this option. Make sure that you have added the “Space for vertical menu” first:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MfhIKK_OwiJTa_8os3B%2F-MfhMTGIdUkHqMfhFoVv%2FScreenshot_7.png?alt=media\&token=e0a40247-403c-4bf9-808e-2915efee3f6a)

## Content

### Top line content

&#x20;This option is available for the header type # 5, type # 6, and type # 7 only. Here you can add some additional information in the top-line content of the header. Simply select the page with the information you need. In the Shella theme, there are some default pages, which you can edit with your information.

&#x20;This is where you can select them in the Shella theme:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MfhOQC4ZOAEfVNT9eU1%2F-MfhPsWUZROnV1cmJKor%2FScreenshot_10.png?alt=media\&token=97fc959e-3b3f-438a-af55-508681ddec3b)

&#x20;And this is where you can edit them in your _Shopify Admin-> Online Store -> Pages_. Then click on the page and edit it with your information:&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MfhOQC4ZOAEfVNT9eU1%2F-MfhPunL5SrJ_HuZcPqP%2FScreenshot_11.png?alt=media\&token=02d527f9-04c8-4b17-815e-0a85f35f80cf)

&#x20;More information about how to add and edit pages can be found [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/get-started/how-to-add-and-edit-a-page).

## Country/Region Selector

&#x20;To display the currency drop-down in the Header, activate the option **“Enable country/region selector”**. The selector will be available to show if you configure payment options in your _Shopify Admin -> Settings -> Payments_.

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FAw9xJdRb5SWWeDMsw1gx%2Fcountry%20region.png?alt=media&#x26;token=8e618507-a450-4fd1-b9f1-d2f4c51846e0" alt=""><figcaption></figcaption></figure>

&#x20;If your store requires displaying the country using the currency, tick the **“Show country name”** checkbox. Increase the size of the selector to fit the country name and its currency using the **“Select maximum width”** scale from **0** to **300 pixels.** Set the width parameters of the currency drop-down you need.

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FJuyMNxO7DR3U36ekzTuK%2Fcountry%20region_name.png?alt=media&#x26;token=186bb0a7-1225-480c-9a7f-7833928e23f6" alt=""><figcaption></figcaption></figure>

## Sticky Header

### **Sticky state**

&#x20;Here you can choose which version (desktop, mobile, both, or none) the header should be sticky when scrolling down the page. There are four options that you can choose from: “**Desktop and mobile**” (the header remains sticky both in the desktop and mobile version), “**Only desktop**” (the header remains sticky in the desktop version only), “**Only mobile**” (the header remains sticky in the mobile version only), and “**Disable**”. If you choose “**Disable**” the header will not be sticky when scrolling down the page.

### **Sticky type (Desktop)**

&#x20;You can also choose the type of sticky header for the desktop version. There are 2 of them: “**Wide**”, where the whole header with all information lines and menus will be shown, and **“Slim”**, where only the menu line will be displayed.&#x20;

**Slim sticky header:**&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUuEWvir6T8Bhg5N06%2F-MeUwmr9uFHJmIU9uPdO%2FScreenshot_20.png?alt=media\&token=5ed0942d-ce7e-43bf-affb-5825e06c8633)

**Wide sticky header:**&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeUuEWvir6T8Bhg5N06%2F-MeUx2MzO-biwSUbO6Z3%2FScreenshot_22.png?alt=media\&token=3fcae28c-76f6-4840-84d7-e3143bf97e17)

### Hide sticks header when scrolling down

&#x20;This option enables you to hide a sticky header while scrolling down to the bottom of a page. However, it will be displayed when navigating to the top of a page.

&#x20;The sticky header opacity can be changed in the theme settings. Read details [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/animations#sticky-header-opacity).

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://shella-demo.myshopify.com)
{% endhint %}
