# Header

## &#x20;The header's appearance

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FM5GAy0QJvAB5qG1b2Dw4%2Fheader-appearnce.png?alt=media&#x26;token=559f6cb6-ff07-4c5e-92dd-fee1d93a8874" alt=""><figcaption></figcaption></figure>

## Section settings

| Settings                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                        |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page width**              | <ul><li><strong>Boxed</strong>: With boxed width, page content can be displayed within the maximum width. <strong>The page width can be changed in Theme Settings > Layout.</strong></li><li><strong>Full width:</strong> With the "Full width" option, page content can be displayed in its entirety full-width. <strong>When you show content at full width, you can add padding to the left and right sides.</strong></li></ul> |
| **Enable horizontal space** | <p>It will work if you select the "<strong>Full width</strong>" of the page.<br><br>When you enable this option, the padding on the left and right sides will be removed.</p>                                                                                                                                                                                                                                                      |
| **Logo image**              | **This main logo of your website**                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Custom logo width**       | Your logo can have a custom width. The range can be between **50 and 250 pixels**.                                                                                                                                                                                                                                                                                                                                                 |
| **Desktop logo position**   | <p><em><strong>Logo & menu in 1 line</strong></em></p><ul><li><strong>Logo left</strong> </li><li><strong>Logo center</strong></li><li><strong>Logo center, drawer menu</strong></li></ul><p><em><strong>Logo & menu in 2 lines</strong></em></p><ul><li><strong>Logo left</strong> </li><li><strong>Logo center</strong></li></ul>                                                                                                |
| **Border**                  | <p><strong>Hide on home page only</strong></p><p>->  You can enable/disable a border with the header ( <strong>It works, when enabled header design "Logo and menu in 2 lines"</strong> )</p>                                                                                                                                                                                                                                      |

#### Header design ( Desktop logo position )

{% tabs %}
{% tab title="Logo left (2 rows)" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FXf9tdSEKXrSltdBen5UZ%2Flogo-left-2-lines.png?alt=media&#x26;token=378d1220-4639-4d73-8ada-a807f18622dc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center(2 rows)" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F5LTP8Srgo8LozVPIdqDv%2Flogo-center-2-lines.png?alt=media&#x26;token=a1850736-6bee-49ee-b678-23386e3f83ac" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo left (1 row)" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F777dQVdEKsBbVpEa3iZp%2Flogo-left.png?alt=media&#x26;token=884c61c0-270c-431b-bc7d-2868c5dc2898" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center(1 row)" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fipmh9pNPwV4HUw5G2g99%2Flogin-center-1-line.png?alt=media&#x26;token=f44f3810-3560-480d-a481-9f380a9e1768" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo center, drawer menu" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FOwA3HuwgPhK26FfTsJaS%2Fheader-drawer.png?alt=media&#x26;token=eeb50ebd-0aae-4fc3-b445-1a08c693973d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Sticky Header

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fh0IczenH7EgDxNUOoZ1T%2Fsticky.png?alt=media&#x26;token=379ef755-8be4-4944-9370-f09ff2d0c487" alt=""><figcaption></figcaption></figure>

| Settings             | Description                                                      |
| -------------------- | ---------------------------------------------------------------- |
| **Enable**           | You can enable/disable the sticky header                         |
| **Background color** | There is an option to change the sticky header background color. |
| **Text color**       | There is an option to change the sticky header text color.       |

## Transparent Header

#### Step 1

***

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FxshgCqsLoKhHlc6b6gHX%2Ftransparent-1.png?alt=media&#x26;token=7eeb0cd7-1c99-4077-9f55-bd4c175d8266" alt=""><figcaption></figcaption></figure>

| Settings                      | Description                                                       |
| ----------------------------- | ----------------------------------------------------------------- |
| **Enable**                    | You can enable/disable the sticky header                          |
| **Text color**                | There is an option to change the transparent header text color.   |
| **Background color on hover** | There is an option to change the header background color on hover |

#### Step 2

***

* **You need to allow the transparent header for the specific section**

{% hint style="warning" %}
This setting works only if this section is the first one and the transparent header is turned on.
{% endhint %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FRN7NLYSto07qXAnDBn7Z%2Ftransparent-2.png?alt=media&#x26;token=df0e0c41-9374-4876-adbd-d7363abcb1d3" alt=""><figcaption></figcaption></figure>

## Vertical menu

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F9pHm5gZflMmngK4AwbWH%2Fvertical-menu.png?alt=media&#x26;token=4dcf373c-30c4-4da9-a204-48a91296c749" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
To get instructions for the vertical menu, you should visit this page. \[[**Learn more**](https://themihub.gitbook.io/vector-test-theme/header-group/header/vertical-menu)]
{% endhint %}

{% content-ref url="header/vertical-menu" %}
[vertical-menu](https://themihub.gitbook.io/vector-test-theme/header-group/header/vertical-menu)
{% endcontent-ref %}

## Contact info

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FWBjkWJ7kJ0CHq9kBCYr7%2Fcontact-info.png?alt=media&#x26;token=dfcf8c8b-fcdb-4112-a36d-eea08f42566f" alt=""><figcaption></figcaption></figure>

## Desktop drawer menu

{% hint style="info" %}
Required to select "Desktop logo position": Logo center, drawer menu
{% endhint %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FjisyJbEqOizKDF1BkjVD%2Fdrawer-menu.png?alt=media&#x26;token=c62f5e54-e918-4968-ac86-54dc242e9442" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FNl9bs6HERGRlOr65N2l7%2Fdrawer-menu-2.png?alt=media&#x26;token=c3ba0ebc-efcb-478a-b020-ba839de693b4" alt=""><figcaption></figcaption></figure>

## Navigation bar information

{% hint style="info" %}
It will work if the menu bar and logo are 2 lines
{% endhint %}

**Information type**

* Browsing history
* Link
* None

{% tabs %}
{% tab title="Browsing history" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F2ctkCupVsKjm7uxhxbSd%2Fbrowser-history-1.png?alt=media&#x26;token=0e3c7cfb-c6d4-4e28-a207-0774d8c7fe5f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Link" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FCnsFoY5tOOKwpryZj95l%2Flink-1.png?alt=media&#x26;token=8f270496-5b19-4d68-ad24-f542d368d4d1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="None" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FTtHVO0kmM0E7L2foISW7%2Fnone.png?alt=media&#x26;token=7160bfdd-757b-4533-a23e-325bc5c63f0d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Menu position

{% hint style="info" %}
Only applicable for the menu bar and logo are 2 lines.
{% endhint %}

<table><thead><tr><th width="304">Settings</th><th>Description</th></tr></thead><tbody><tr><td><strong>Menu alignment</strong></td><td><ul><li><strong>Left:</strong> You can align the menu's left menu. </li><li><strong>Right:</strong> You can align the menu's right menu.</li><li><strong>Center:</strong> You can align the menu's center menu.</li></ul></td></tr></tbody></table>

## Cart settings

* **Show cart icon** (You can show/hide the cart icon)

#### Cart icon type

* Bag&#x20;
* Cart
* Basket

{% tabs %}
{% tab title="Bag Icon" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FQtSRqCIkQq6I5oXtDpfr%2Fbag-icon.png?alt=media&#x26;token=b014c23a-b085-40a1-8dfa-af3b319f6239" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Cart Icon" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FLrMNpJ64r1sQTK6rE3Tl%2Fcary-icon.png?alt=media&#x26;token=03bfea57-cc5b-447d-bfbd-9fc53dea17d1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Basket Icon" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FRNgrSORoL9sQdFveuhs2%2Fbasket.png?alt=media&#x26;token=fd7d06e9-acaa-4476-94fc-ee530697dd98" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
To get more settings for the cart drawer, you should visit this page. \[[**Learn more**](https://themihub.gitbook.io/vector-test-theme/theme-settings/cart)]
{% endhint %}

{% content-ref url="../theme-settings/cart" %}
[cart](https://themihub.gitbook.io/vector-test-theme/theme-settings/cart)
{% endcontent-ref %}

## Search settings

#### Search type

* Show icon
* Show search box  (**Only applicable for Logo and menu in 2 lines header design**)
* hide

#### **When the Logo and menu are in 2 lines header design**

{% tabs %}
{% tab title="Show search box" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FnOxeMHEnhr5urZSiGO0R%2Fsearch.png?alt=media&#x26;token=b47d523d-cd08-4965-b7c7-79aee29428bc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Show icon" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F2bDUefEuIhuQkrtAYb8I%2Ficon-search.png?alt=media&#x26;token=65521658-56f4-4270-8bc5-f83acc1269f1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Customer Account settings

* **Show account icon** ( It will be shown if the [customer account](https://help.shopify.com/en/manual/customers/customer-accounts) is enabled )

{% content-ref url="../general-topics-faq/how-to-enable-a-customer-account" %}
[how-to-enable-a-customer-account](https://themihub.gitbook.io/vector-test-theme/general-topics-faq/how-to-enable-a-customer-account)
{% endcontent-ref %}

## Mobile Settings

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FmTDBrV2W5jFnK1IPWKp7%2Fmobile-settings.png?alt=media&#x26;token=50a01df6-83d4-47df-a5fa-0600c2d13b5e" alt=""><figcaption></figcaption></figure>

## Color settings

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FBbw9iloLplFu5u1aTNEN%2Fcolor-header.png?alt=media&#x26;token=d735e584-74c0-40f0-8630-a7a80512225b" alt=""><figcaption></figcaption></figure>
