# Header

<figure><img src="https://1485471486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7H1ZB4J9TQlWDiI82pRW%2Fuploads%2FgBQorrxLz1c6GhaKQhoG%2Fimage.png?alt=media&#x26;token=8185b65c-2541-48fa-99b5-bf3dc44c1f9f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Update in version 3.0.0:** Color **Scheme 12** background changed to `#FEF7F0` and text color to `#1D3029`
{% endhint %}

## Section settings <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop logo position</td><td><p>The position of your logo in the desktop header.</p><ul><li>Top left</li><li>Top center</li><li>Middle left</li><li>Middle center</li></ul></td></tr><tr><td>Menu</td><td>The menu to use for your main menu.</td></tr><tr><td>Sticky header</td><td><p>A sticky header is a navigation bar that remains fixed at the top of the web page as the user scrolls down.</p><ul><li><strong>None</strong></li><li><strong>On scroll up</strong></li><li><strong>Always</strong></li></ul></td></tr><tr><td>Show separator line</td><td>Displays a line to visually separate the header from the page's content.</td></tr><tr><td>Use icons <br><sub><em>(For cart and search)</em></sub></td><td>Displays the search icon and the cart icon.</td></tr></tbody></table>

**Transparent header**

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable on home page</td><td>Select this checkbox to enable/disable transparent header on homepage.</td></tr><tr><td>Show separator line</td><td>Displays a line to visually separate the header from the page's content.</td></tr><tr><td>Logo</td><td>The logo for the transparent header. Use this logo on the pages which transparent header is enabled.</td></tr><tr><td>Color scheme</td><td>Set the color for the transparent header.</td></tr><tr><td>Background overlay opacity</td><td>Dims the background color by applying an overlay.</td></tr><tr><td>Blurred reflection</td><td>Enable blurred reflection</td></tr><tr><td>Reflection opacity</td><td>Adjust the visibility of the reflection. Range: 0% to 100%.</td></tr></tbody></table>

**Color**&#x20;

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Set the color for the header when the transparent header is not enabled.</td></tr><tr><td>Menu color scheme</td><td>Set the color for the main menu.</td></tr></tbody></table>

#### **Right menu**

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable right menu</td><td>Select this checkbox to enable/disable the right menu for Login, Customer Services, Contact, Get Helps, Language, Currency, Social Share.</td></tr><tr><td>Custom menu handle</td><td>Enter the handle of the menu to display in the right menu.<br><br>(A handle is used to reference a menu in Liquid. e.g. a menu with the title “Sidebar menu” would have the handle <code>sidebar-menu</code> by default. <a href="https://shopify.dev/docs/themes/liquid/reference/basics/handle">Learn more</a>)</td></tr><tr><td>Enable country/region selector</td><td>Adds the country/region selector to allow customer choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.</td></tr><tr><td>Enable language selector</td><td>Adds the language selector to allow customer choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.</td></tr><tr><td>Show social media icons</td><td>Displays social media icons that you've entered a profile link for in your theme settings.</td></tr></tbody></table>

**Mobile layout**

<table><thead><tr><th width="233">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile logo position</td><td><p>The position of your logo in the mobile header.</p><ul><li>Center</li><li>Left</li></ul></td></tr><tr><td>Show search icon</td><td>Displays search icon on mobile.</td></tr></tbody></table>

**Spacing**

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Bottom margin</td><td>Adjust the space between the bottom edge of a section and the elements or content below it.</td></tr></tbody></table>

**Section padding**

<table><thead><tr><th width="233">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from 0px to 36px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from 0px to 36px, increasing arithmetically of 2px (pixel).</td></tr></tbody></table>

## Mega menu **Block**

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Menu item name</td><td>Enter the name of the menu item to which you would like to apply this mega menu.</td></tr></tbody></table>

**Custom menu**

<table><thead><tr><th width="234">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Menu</td><td>Select the menu to display as sub-categories in the mega menu layout.</td></tr></tbody></table>

**Promotion Content**

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>The image to display in the mega menu.</td></tr><tr><td>Link</td><td>The link that you want customers to navigate to if they click the image.</td></tr></tbody></table>