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

# Header

### Configure the header section

Select customize the theme. Click on the top dropdown menu to select the home page template.

Click on the customize theme.

From the side menu, select the header.

Configure the **"Header"** in the setting on the right side with the following settings.

<table data-header-hidden><thead><tr><th width="225"></th><th></th></tr></thead><tbody><tr><td>Header</td><td><strong>Container width</strong><br>Choose the container width from following options:<br>- Edges gap<br>- Small<br><br><strong>Header style</strong><br>Choose the header style from below options: <br>- Logo left, menus center <br>- Logo left, menus left<br>- Logo center, menus left <br>- Split menus<br>- Side reveal menus<br><br><strong>Sticky header</strong><br>Select from the following options:<br>- <strong>None</strong><br><strong>- On scroll up:</strong> This setting makes the header sticky when users scroll up the page from the bottom.<br><strong>- Always:</strong> This setting keeps the header permanently sticky as the page is scrolled.<br><em>(<strong>Note</strong>: It's not applicable to the side reveal menus header style.)</em><br><br><strong>Border visibility</strong><br>Choose the border visibility from below options:<br>- None<br>- Always<br>- On scroll.<br><br><strong>Enable icon background</strong><br>Select this checkbox to show the background of icons.</td></tr><tr><td>Split menus</td><td><strong>Enable collapse menus</strong><br>Select this checkbox to enable the menus collapse for the split menus only.</td></tr><tr><td>Logo</td><td><p><strong>Logo</strong><br>Select any image to appear as the store logo.<br></p><p><strong>Desktop logo width</strong><br>Adjust the slider to customize the logo width from 100px to 300px.<br><br><strong>Mobile logo width</strong><br>Adjust the slider to customize the logo width from 50px to 150px</p></td></tr><tr><td>Split header logo</td><td><p><strong>Light colored logo visibility</strong><br>Choose from the options to show light colored logo visibility:<br>- None<br>- Home page only<br>- All pages.<br><br>This setting works on below style of logos only:</p><ul><li>Dark logo (for light background)</li><li>White logo (for dark header)<br><br>For e.g.<br><br><img src="/files/JEMvK2dAMuKzLBOpwE5D" alt=""><br><br><br><img src="/files/SvAK3XLiDhz9hHMIbcG6" alt=""></li></ul></td></tr><tr><td>Transparent header</td><td><p><strong>Transparent pages</strong><br>Choose where to make the header transparent:</p><p>- None<br>- Home page only<br>- All pages<br><br><strong>Transparent visibility</strong><br>Choose the visibility of transparent header on:<br>- Desktop<br>- Mobile<br>- Both<br><br><strong>Header space</strong><br>This space adjusts the header as per the background width. Choose the header space options from the following options:<br>- Small<br>- Medium<br>- Large<br><br><em>(<strong>Note</strong>: Transparent logo and colors will not work in split header type.)</em><br><strong>Alternate logo</strong><br>Select any image to appear in the transparent header.<br><br>Colors<br><strong>Text</strong><br>Choose any color for the text in the transparent header.<br><br><strong>Icon background</strong><br>Choose any color for the icon background in the transparent header.<br><br><strong>Icon color</strong><br>Choose any color for the icon in the transparent header.</p></td></tr><tr><td>Navigation</td><td><strong>Menu</strong><br>Select menus from the backend default navigation list of Shopify. It will appear in the <strong>Header</strong> as the menu. For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a><br><br><strong>Open first menu items on</strong><br>Choose from the following options to open the menus on:<br>- Click<br>- Hover<br><br><strong>Desktop menu type</strong><br>Select from the <strong>Dropdown</strong> or <strong>Mega menu</strong> to display the menu time.<br><em>(<strong>Note</strong>: Menu type is automatically optimized for mobile.)</em></td></tr><tr><td>Category menus</td><td>Select menus from the backend default navigation list of Shopify.  These category menus appear in the left drawer.<br>For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a></td></tr><tr><td>Mobile</td><td><strong>Show social media icons</strong><br>Select the checkbox to show the social media icons.<br><em>(Note: To showcase your social media profiles, please link them in the social media settings under the theme settings.)</em><br><br><strong>Show language and location</strong><br>Select the checkbox to show the language and currency details.<br><em>(Note: To display either the language or location (currency), navigate to theme settings > Internationalization, and select the desired option.)</em><br><br><strong>Mobile logo position</strong><br>Choose the logo position from below options:<br>- Center<br>- Left.</td></tr></tbody></table>

## Mega menu with gallery

*(**Note**: This mega menu is not applicable to the category menus.)*

1. Add the mega menu with gallery block.
2. Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.
3. You will be connected to this menu by typing the same name into the mega menu created through the theme editor.&#x20;

<table data-header-hidden><thead><tr><th width="226"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Mega menu with gallery</td><td><strong>Menu label</strong><br>Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus.<br><br><em>Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field.</em> <br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Menu</strong><br>Select menus from the backend default navigation list of Shopify.  For more details, refer to the <a href="https://help.shopify.com/en/manual/online-store/menus-and-links"><strong>Shopify menus.</strong></a><br><br><strong>Show menu images</strong><br>Select this checkbox to show the images of collection and blog posts in the added menu above.<br><br><strong>Default image</strong><br>Choose any image from the store library. This image appears on the menus without having an image.</td><td></td></tr><tr><td>Content</td><td><strong>Image ratio</strong><br>Choose the image ratio from the following options:<br>- Auto<br>- Landscape<br>- Square<br>- Portrait<br><br><strong>Solid Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.<br><br><strong>Text alignment</strong><br>Choose the text alignment from below options:<br>- Left<br>- Center<br>- Right</td><td></td></tr><tr><td>Promotion 1 &#x26; 2</td><td><strong>Image</strong><br>Choose an image to display in the mega menu.<br><br><strong>Heading</strong><br>Add a descriptive caption to the image in the mega menu.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- Medium<br>- Small<br>- X-small<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Description text size</strong><br>Select the description text size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br><br><strong>Image link</strong><br>Include a link to the image in the mega menu.</td><td></td></tr></tbody></table>

## Category mega menus

*(**Note**: This mega menu is not applicable to the main menus.)*

* Add the category mega menus block.
* Select a menu label similar to the first-level navigation you added in category menus. For instance, Catalog.
* You will be connected to this menu by typing the same name into the mega menu created through the theme editor.&#x20;

<table data-header-hidden><thead><tr><th width="226"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Category mega menus</td><td><strong>Menu label</strong><br>Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus.<br><br><em>Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field.</em> </td><td></td></tr><tr><td>Content</td><td><strong>Image ratio</strong><br>Choose the image ratio from the following options:<br>- Auto<br>- Landscape<br>- Square<br>- Portrait<br><br><strong>Solid overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.<br><br><strong>Text alignment</strong><br>Choose the text alignment from below options:<br>- Left<br>- Center<br>- Right</td><td></td></tr><tr><td>Promotion 1 &#x26; 2</td><td><strong>Image</strong><br>Choose an image to display in the mega menu.<br><br><strong>Heading</strong><br>Add a descriptive caption to the image in the mega menu.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- Medium<br>- Small<br>- X-small<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Description text size</strong><br>Select the description text size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br><br><strong>Image link</strong><br>Include a link to the image in the mega menu.</td><td></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://shinedezign.gitbook.io/genie/overview/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.