> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/header/header-section.md).

# Header section

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

The **Header** section is the main navigation area of your online store. It allows you to customize the header layout, menu style, logo position, transparent header appearance, search and account display, and other navigation options.

The Header can be configured differently to match your store's design and provide customers with easy access to navigation, search, account, and cart options.

### 1. Middle left

* **Menu type**: Wide menu

<figure><img src="/files/RAJnxwa7tv5qsOWktMoG" alt=""><figcaption></figcaption></figure>

* **Menu type**: Sidebar

<figure><img src="/files/p1RhWaBv4HTsvCQTtZyO" alt=""><figcaption></figcaption></figure>

### 2. Middle center

* **Menu type**: Wide menu

<figure><img src="/files/68MVRLPXcd41tykMAaDl" alt=""><figcaption></figcaption></figure>

* **Menu type**: Sidebar

<figure><img src="/files/BAfWPHHuLWlqZuMvopTI" 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><strong>Tab</strong> — Shows the active link inside a tab style background.</li><li><strong>Text</strong> — Highlights only the text.</li><li><strong>None</strong> — No special styling for active links.</li></ul></td></tr><tr><td>Active menu text color</td><td><p>Select the color used to highlight the active menu item. </p><p></p><p><strong>Note:</strong> This settings only visible when '<strong>Active menu style</strong>' is selected to '<strong>Text</strong>'.</p></td></tr><tr><td>Show bottom border</td><td>Enable this option to display a border line at the bottom of the header. </td></tr><tr><td>Enable glass effect on home page</td><td>Enable this option to apply a glass-style visual effect to the header on the home page.</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>The <strong>Transparent Header</strong> settings allow the header to overlay the first section on the home page. This creates a seamless appearance where the banner or slideshow image appears behind the header.</p><p></p><p><strong>Enable transparent header on home page</strong></p><p>Enable this option to display a transparent header over the first section of the home page.</p><p><br><strong>Text and icons</strong></p><p>Select the color used for the header text and icons when the transparent header is active. This setting works when the header has no background. </p><p></p><p><em><strong>Note:</strong> Choose a text and icon color that provides sufficient contrast with the background image for better visibility.</em></p></td></tr><tr><td>Enable space around header</td><td>Enable this option to add spacing around the header for a separated or floating header appearance.</td></tr><tr><td>Menu</td><td>Select the navigation menu you want to display in the header.</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>Enable menu center</td><td>Enable this option to center the desktop navigation menu when supported by the <strong>'Desktop logo position'</strong> is set to <strong>'Middle left'</strong>.</td></tr><tr><td>Desktop menu type</td><td><p>Choose how the menu will appear on desktop:</p><p><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. </p><p></p><p>The menu type is automatically optimized for mobile devices.</p></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><p><em><strong>Note:</strong> This setting only visible when '<strong>Desktop menu type</strong>' is set to '<strong>Collapse and wide menu</strong>'.</em></p></td></tr><tr><td>Sticky header</td><td><p>Choose how the header behaves when customers scroll through the page.</p><ul><li><strong>None —</strong> The header does not remain visible when customers scroll down the page.</li><li><strong>Always —</strong> The header remains fixed and visible at the top of the screen while customers scroll.</li><li><strong>Always, reduce logo size —</strong> The header remains visible while scrolling, and the logo size is reduced to create a more compact sticky header.</li></ul></td></tr><tr><td>Color scheme</td><td><p>Select a predefined color scheme for the main header area.</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><li>Scheme 6</li></ul></td></tr><tr><td>Menu color scheme</td><td><p>Select a color scheme for the navigation menu and its related menu content. 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><p><strong>Enable country/region selector</strong><br>Enable this option to allow customers to select their preferred country or region from header section. </p><p></p><p>Available countries and regions can be managed from your Shopify market settings. can see country/region selector in the header section.</p></td></tr><tr><td>Language selector</td><td><p><strong>Enable language selector</strong><br>Enable this option to allow customers to switch between the languages available on your online store. </p><p></p><p>Languages can be managed from your Shopify language settings.</p></td></tr><tr><td>Customer accounts log in</td><td><p><strong>Show avatar</strong> </p><p>Enable this option to display the customer's avatar in the header. </p><p>Customers will only see their avatar when they are signed in with Shop.</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="/files/z0uRfQqCxzRMOdx3mI3p" alt=""><figcaption></figcaption></figure>