# Header

##  The header's appearance

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FDIKkhtJVqObGBlMZAJ3p%2FScreenshot_14.png?alt=media&#x26;token=6d8f684f-ca3d-4b8c-b2cd-0ffe7ae41ee2" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FDRdyRYZ2voFcac1FfZUT%2FScreenshot_15.png?alt=media&#x26;token=7655cbfa-d84c-40c9-b07a-aa370e68cf64" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2Fbhy9YqLcS612KCGgOWFb%2FScreenshot_16.png?alt=media&#x26;token=772c0377-5001-49b5-b756-23ca4931264b" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FU0jhpHlnvAqcvO2M134G%2FScreenshot_17.png?alt=media&#x26;token=d1e31ceb-b68b-4a1a-9f01-c8ba53edfb2b" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F8KkNyekXXBRGpsP6DfTK%2FScreenshot_18.png?alt=media&#x26;token=603c3ed1-2ce8-4715-9fe0-5f6567b8805f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Sticky Header

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F5bx2VWGlTtiokzSJWcu6%2FScreenshot_19.png?alt=media&#x26;token=538a6593-b577-4f0d-ae02-cec036adc7db" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FA2eHpEvU9QvYk8QsQIcg%2FScreenshot_20.png?alt=media&#x26;token=0dd1c819-028b-4f9d-99a2-f5ea8924a1f8" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FcxNmfVXC5ZWZonMzyV0B%2FScreenshot_21.png?alt=media&#x26;token=b9f3ae1b-4e7a-4954-b7c5-d00487f2654f" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F5bsfkHEzXtmmoW1ZPcGr%2FScreenshot_22.png?alt=media&#x26;token=89cd4a22-48dd-4721-8648-0dce98138e5c" 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=PLWCiWoEvn91jNQMp4Ts9ECrHUw6JWiqWs&v=UNetDrYGzpQ>" %}