# Header section

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

There are three navigation menu arrangement types in the Koto theme’s header section.

### 1. Top left

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FCtZSKmfZbs82qJXm4UWs%2Fheader-top-left.png?alt=media&#x26;token=71580715-a2ff-485d-a4c2-a414a2f173e9" alt=""><figcaption></figcaption></figure>

### 2. Top center

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FUmVK7dXjqLQVTiNhvCsw%2Fheader-top-center.png?alt=media&#x26;token=a34d1aa6-4df3-45f7-96e7-06d7dcb2b419" alt=""><figcaption></figcaption></figure>

### 3. Middle left

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fa1HerMEETxgG049XwFSF%2Fheader-middle-left.png?alt=media&#x26;token=eb54460b-3728-426b-b791-1fe87e600c30" alt=""><figcaption></figcaption></figure>

### 4. Middle center

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FKyLlFNJLtGjzNf6IOy3S%2Fheader-middle-center.png?alt=media&#x26;token=6838d41e-5d04-449d-a259-bbb07e138a6a" alt=""><figcaption></figcaption></figure>

The header customizations are as follows:

<table><thead><tr><th width="282">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of layout in the header section is as follows:</p><ul><li>Wide</li><li>Container</li></ul></td></tr><tr><td>Topbar</td><td><p><strong>Show topbar on desktop</strong> </p><p>Enable this setting to show topbar in header section. </p><p></p><p><strong>Color scheme</strong> </p><p>In this section, you can change the background and foreground color of the topbar using the color scheme: </p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5 </li></ul><p></p><p><strong>Show bottom border</strong> </p><p>Enable this setting to show topbar bottom border in header section. </p><p></p><p><strong>Custom link</strong> </p><p>Add Custom link in topbar of header section using this setting.  </p><p></p><p><strong>Show social media icons</strong> </p><p>Enable this setting to show social media icons in topbar.</p></td></tr><tr><td>Country/region and language selector</td><td><p><strong>Enable country/region selector</strong> </p><p>By enabling this checkbox, you can see country/region selector in the header section. </p><p></p><p><strong>Enable language selector</strong> </p><p>By enabling this checkbox, you can see Language selector in the header section.</p></td></tr><tr><td>Desktop header type</td><td><p></p><p>Customization of desktop header type in the header section is as follows:</p><ul><li>Logo top left, menu bottom</li><li>Logo top center, menu bottom</li><li>Logo middle left, menu center</li><li>Logo middle center, menu left</li></ul></td></tr><tr><td>Icon style</td><td><p>Customization of icon style in the header section is as follows:</p><ul><li>Icon </li><li>Text</li><li>Text with icon</li></ul></td></tr><tr><td>Show user icon with text</td><td>Enable this checkbox to show account icon with text.</td></tr><tr><td>Text size</td><td><p>Customization of icon with text size in the header section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Uppercase icon text</td><td>Enable this checkbox to transform icon text into uppercase.</td></tr><tr><td>Show separator between icon</td><td>Enable this checkbox to show separator between icon.</td></tr><tr><td>Sticky header</td><td><p>Customization of Sticky header in the header section is as follows:</p><ul><li>None</li><li>Always</li><li>Always, reduce logo size</li></ul></td></tr><tr><td>Show bottom border</td><td>Enable this checkbox to show border of the bottom.</td></tr><tr><td>Customer accounts login</td><td><p><strong>Show avatar</strong></p><p>Enable this checkbox to show avatar. </p><p></p><p><strong>Dropdown color scheme</strong> </p><p>In this section, you can change the background and foreground color of the Customer accounts dropdown using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Uppercase menu</td><td>Enable this checkbox to show menu text in uppercase.</td></tr><tr><td>Show main menu title link</td><td>Enable this checkbox to show menu link in the header main menu.</td></tr><tr><td>Navigation color scheme</td><td><p>In this section, you can change the background and foreground color of the main menu using the color scheme. </p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p>This settings only works with menu is set to bottom.</p></td></tr><tr><td>Menu</td><td>Click on "Select menu" to add a menu in the header section.</td></tr><tr><td>Desktop menu alignment</td><td><p>Customization of desktop menu alignment in the header section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Desktop menu size</td><td><p>Customization of desktop menu size in the header section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Desktop menu type</td><td><p>Customization of desktop menu type in the header section is as follows:</p><ul><li>Inline</li><li>Burger menu</li></ul></td></tr><tr><td>Show dropdown submenu on hover</td><td>Enable this checkbox to show dropdown submenu on hover of the menu.</td></tr><tr><td>Color</td><td><p><strong>Color scheme</strong></p><p>In this section, you can change the background and foreground color of the section using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p><strong>Menu  color scheme</strong></p><p>In this section, you can change the background and foreground color of the menu using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Spacing</td><td><strong>Bottom margin</strong><br>You can adjust the range of the bottom margin to increase or decrease the bottom spacing as needed.</td></tr><tr><td><h4><strong>Section padding</strong></h4></td><td>Utilize this feature to add spacing to the top and bottom of the menu.<br>Applicable when desktop logo position is set to 'top left' or 'top center'.</td></tr></tbody></table>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FdH916VC8doS2IwlDYmJ9%2Fheader.png?alt=media&#x26;token=c90ccf4b-d77a-48a0-8b3a-71d05ed9a796" alt=""><figcaption></figcaption></figure>