# Header section

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

&#x20;There are three navigation menu arrangement types in the Flute theme’s header section.

### 1. Middle left

* **Menu type**: Wide menu

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FAOXyPw39CjDOTBVXL7Dr%2Fheader1.png?alt=media&#x26;token=72ccfe63-19cd-40dd-812b-ed27d6c9fb75" alt=""><figcaption></figcaption></figure>

* **Menu type**: Sidebar

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FfCXBiDbs7GH4AlskhnYC%2Fheader3.png?alt=media&#x26;token=28aec4f9-e889-4f9f-9769-91be9cc02a7e" alt=""><figcaption></figcaption></figure>

### 2. Middle center

* **Menu type**: Wide menu

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FplxfvvqwPIDGgfw522Cd%2Fheader2.png?alt=media&#x26;token=da829ea5-a8b9-4471-b60c-dbcdff48d9c0" alt=""><figcaption></figcaption></figure>

* **Menu type**: Sidebar

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FaSiQ9QsXS3nPFilHlAmj%2Fheader4.png?alt=media&#x26;token=0f45ea15-f620-4663-a0e4-79814db87c63" 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>Enable blocks header on home page</td><td>Turn this option <strong>ON</strong> to switch the header layout on the homepage to a block-based design.</td></tr><tr><td>Active menu style</td><td><p>Choose how the currently selected menu item will look.</p><ul><li>Tab - Shows the active link inside a tab style background.</li><li>Text - Highlights only the text.</li><li>None - No special styling for active links.</li></ul></td></tr><tr><td>Active menu text color</td><td>Pick a color for the active menu link.</td></tr><tr><td>Enable glass effect on home page</td><td>Adds a modern <strong>blurred glass effect</strong> to the header background when viewed on the homepage.</td></tr><tr><td>Search/account style</td><td>Choose how the <strong>Search</strong> and <strong>Account</strong> options appear in the header:<br>• <strong>With text</strong> – Shows both icons and labels.<br>• <strong>Without text</strong> – Shows only icons.</td></tr><tr><td>Enable capitalize text</td><td>Turns on automatic capitalization for all menu text</td></tr><tr><td>Transparent header</td><td><p><strong>Enable transparent header on home page</strong></p><p>By enabling this checkbox, you can Enable transparent header on home page.</p><p><br><strong>Text and icons</strong></p><p>Choose the color of text and icons when the header is transparent.</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 logo position</td><td><p>Customization of desktop logo position in the header section is as follows:</p><ul><li>Middle left</li><li>Middle center</li></ul></td></tr><tr><td>Desktop menu type</td><td>Choose how the menu will appear on desktop:<br>• <strong>Collapse menu</strong> – Hides the menu under a toggle icon.<br>• <strong>Wide menu</strong> – Displays a regular horizontal menu.<br>• <strong>Sidebar</strong> – Opens the menu in a sidebar panel.</td></tr><tr><td>Wide menu style</td><td><p>Customization of Wide menu style in the header section is as follows:</p><ul><li>Full menu</li><li>Half menu</li></ul></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>Color scheme</td><td><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><li>Scheme 6</li></ul></td></tr><tr><td>Menu 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><li>Scheme 6</li></ul></td></tr><tr><td>Country/region selector</td><td><strong>Enable country/region selector</strong><br>By enabling this checkbox, you can see country/region selector in the header section.</td></tr><tr><td>Language selector</td><td><strong>Enable language selector</strong><br>By enabling this checkbox, you can see language selector in the header section.</td></tr><tr><td>Customer accounts log in</td><td><p><strong>Show avatar</strong> </p><p>Enable this setting to display the <strong>customer’s profile avatar</strong> in the header when they’re logged in.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile logo position</strong>  </p><p>Decide where the <strong>logo appears on mobile devices</strong>:<br>• Center <br>• Left</p></td></tr><tr><td>Outer space</td><td><p><strong>Bottom space</strong> </p><p>Use this to add extra spacing below the header section.</p></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F9R49IldpbM2nLuAJzu66%2Fheader-main.png?alt=media&#x26;token=6ae7df3b-a1f9-433f-af03-84e6a61bd3e9" alt=""><figcaption></figcaption></figure>
