# Header

##  The header's appearance

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2Fewn1dD2QTCXUKBb0baUL%2Fheader.png?alt=media&#x26;token=01190200-ed47-4364-8ce7-5b155d378245" 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 Offset (left & right)** | <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**.                                                                                                                                                                                                                                                                                                                                                 |
| **Header design**                | <p><em><strong>Logo & menu in 1 line</strong></em></p><ul><li><strong>Logo left</strong> </li><li><strong>Logo center</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**                       | You can enable/disable a border with the header                                                                                                                                                                                                                                                                                                                                                                                    |
| **Hide on home page only**       | It works when enabled header design "Logo and menu in 2 lines"                                                                                                                                                                                                                                                                                                                                                                     |

#### Header design

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FvMtRHc5LfLC2CYV3Xk0h%2Fleft-1-row.png?alt=media&#x26;token=da6dcb63-8fc3-4dd8-8156-8f189e7a37a2" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FaIFmQK3PNhVY8pf3VdSB%2Fcenter-1-row.png?alt=media&#x26;token=735559c6-7e29-475c-8951-f327f2a84eb9" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FHFeseij8CaJ4KxOj9bG1%2Fleft-2-row.png?alt=media&#x26;token=736bed86-483e-4440-aec9-ce72f303bf66" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FNJNKthRZasuxWaS6kCvg%2Fcenter-2-row.png?alt=media&#x26;token=47e8016e-8bb0-4506-88ba-107f63910cf8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Sticky Header

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FhG9ZvjHfQbyDiZtg2mYM%2Fsticky_header.png?alt=media&#x26;token=5502e0c6-972b-4e68-a5b9-e9a4b9c4a12c" 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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FBxktMDkisaX1T5yTgmFY%2Ftransparent_header.png?alt=media&#x26;token=b9c11662-0a4f-4b7e-8f9c-f4eac2d95a50" 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 |

#### Header option settings

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FGj7HO742h8giWyAOQISc%2Fheader_options.png?alt=media&#x26;token=fb3ca988-0880-4c63-b061-7b354870743e" alt=""><figcaption></figcaption></figure>

| Settings                                                                              | Description                                                                                                          |
| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Show account icon**                                                                 | You can show/hide account icon.                                                                                      |
| **Show cart icon**                                                                    | You can show/hide the cart icon.                                                                                     |
| **Show wishlist icon**                                                                | You can show/hide the wishlist icon.                                                                                 |
| **Show compare icon**                                                                 | You can show/hide the compare icon.                                                                                  |
| **Search (**&#x4F;nly applicable for Logo and menu in 2 lines header desig&#x6E;**)** | <ul><li><strong>Show icon</strong> </li><li><strong>Show search box</strong></li><li><strong>hide</strong></li></ul> |
| Color scheme                                                                          | You can change color of header section.                                                                              |
| Submenu color scheme                                                                  | You can change color of the submenu.                                                                                 |

#### WELCOME TEXT

***This will apply when the menu bar is at the bottom and the logo is at the top left***

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FShNgRXs6bUzlP3dMwgJi%2Fwelcome-text.png?alt=media&#x26;token=0da94cde-9da9-4b19-a833-6117744964ce" alt=""><figcaption></figcaption></figure>

| Settings        | Description                                     |
| --------------- | ----------------------------------------------- |
| **Enable text** | You can enable/disable it.                      |
| **Text**        | This is the field to change the text.           |
| **Image**       | You can add an image for the welcome text icon. |
| **SVG icon**    | You can change the using your own SVG code.     |

## Menu position

Only applicable for Logo and menu in 2 lines header design.Also, if disable phone text then it will display perfectly.

| Settings           | Description                                                                                                                                                                                                               |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Menu alignment** | <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> |

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=7&list=PLWCiWoEvn91ivfW5vf1gw_rnacJw8G5pj&v=GzNBCincnrQ>" %}