# 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>Logo</td><td><p><strong>Logo</strong><br>Select any image to appear as the store logo.<br><br><strong>Alternate logo</strong><br>Select any image to appear in the transparent header.<br></p><p><strong>Desktop logo width</strong><br>Adjust the slider to customize the logo width from 50px to 250px.<br><br><strong>Mobile logo width</strong><br>Adjust the slider to customize the logo width from 50px to 150px<br><br><strong>Enable bottom shadow</strong><br>Select this checkbox to show bottom shadow in header.</p></td></tr><tr><td>Logo transition</td><td><p>This works only on home page when 'Sticky Always' is enabled. The logo will smoothly move from the bottom to the top of the header as you scroll down.</p><p>We recommend using a high-quality logo for a better transition effect.<br><br><strong>Enable transition</strong><br>Select this checkbox to show the logo transition.</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>Header layout</strong><br>Select the preferred header from the drop-down menu:<br>-  Logo left menu left<br>- Logo left menu center<br>- Logo center menu left<br>- Hamburger <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><br><br><strong>Menu event</strong><br>Choose from the following options to open the menus on:<br>- Click<br>- On hover<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><br><strong>Enable bottom shadow</strong><br>Select this checkbox to show the bottom shadow in header.</td></tr><tr><td>Header transparency</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</p></td></tr></tbody></table>

## Mega menu

1. Add the mega menu 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>Menu label</td><td>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>Promotion 1-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>Description</strong><br>Enter the description text.<br><br><strong>Link</strong><br>Include a link to the image in the mega menu.<br><br><strong>Text color</strong><br>Choose the text color.<br><br><strong>Overlay color</strong><br>Choose the image overlay color.<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td><td></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://shinedezign.gitbook.io/maya/overview/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.