# Header

***

The header usually contains the logo of a store, the main navigation menu, and other elements such as a search bar, shopping cart icon, etc. The header plays a vital role in branding your store, helping visitors navigate, and displaying your most important pages. 

### **1. Header section settings:**

* Click the **Header** section and open the section settings.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/cd73c49f-9636-4792-9bf9-f899f410f526/Screenshot%202023-11-30%20at%204.53.43%20PM.png" alt=""><figcaption></figcaption></figure>

* Use the **Color scheme** dropdown to set the color for the header section.
* Check the **Enable transparent header** checkbox to turn on the transparent header feature.

You can make your store's header transparent on your Home page to display your Slideshow, Video banner, or Image banner section at the top of the page.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/4f716ef2-fca5-45ac-bb57-e2a34101d685/Screenshot%202023-11-30%20at%204.58.34%20PM.png" alt=""><figcaption></figcaption></figure>

* Select **Change icon & text color** to set your color: enter a hex color code, or choose the color from the color picker. The color will need to contrast with your slides or video to ensure visibility.
* Add a Logo image to be used specifically with the transparent header.&#x20;

> ***Note**: Use an edited logo image with alternate colors to contrast with your slideshow images. For example, you may need a dark-colored version of your logo to look good on light-colored backgrounds.*
>
> *This image only displays when the header is transparent. Your main logo image will automatically display when the header is no longer transparent.*

### **2. Logo** **settings**:&#x20;

* Select or upload an image to be used as the logo in the heading. If you don't upload a logo, the name of your store appears instead. We recommend using a logo with a transparent background.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/11cd86fa-13e4-4ecc-85fb-006e0f7fb304/Screenshot%202023-11-30%20at%205.12.18%20PM.png" alt=""><figcaption></figcaption></figure>

* Use the **Custom logo width** slider to change the size of the logo in the header.
* Change the **Desktop logo position** based on your preferences.

{% tabs %}
{% tab title="Middle left" %}
This style places the brand logo to the left with the navigation in the center. The design is a more compressed header area. Ideal for smaller/shorter navigation menus.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/95c2f8d6-a44e-49db-9b41-c2cf2c856e78/Untitled%20design%20(18).png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top left" %}
This style places the brand logo to the top left with the navigation menu below. Ideal for longer navigation menus.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/727fe8c1-084a-457a-94d5-43b601ae89ee/Untitled%20design%20(19).png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top center" %}
This style places the brand logo in the middle and the navigation menu below. Stores with many menu items can place the navigation below the brand logo and position items like account, search, and cart icons on the top right and social media icons on the top left.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/cc46bf37-cd4c-4dce-a74c-a9bd9501c75a/Untitled%20design%20(20).png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle center" %}
This common option presents the brand logo centered with navigation menu items on the left. Ideal for compact headers with a shorter top-level menu structure.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/e59e193b-4889-4e95-a0e5-a8c34b9145be/Untitled%20design%20(21).png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **3. Menu settings:**

* **Desktop menu type**: This setting helps you customize the display of the header menu.

{% tabs %}
{% tab title="Dropdown" %}
You can use drop-down menus to group products, collections, or pages together and make it easier for customers to navigate your online store. This can help a customer to find the type of products that they're looking for.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/97580647-e8a6-4f9d-a2ba-efad112a5f99/Screenshot%202023-12-01%20at%209.38.35%20AM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mega" %}
This style opens your menu links in multiple columns so customers can browse large catalogs quickly and easily.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/d5032d8f-1ebb-4e03-a6e0-1aabb7373882/Screenshot%202023-12-01%20at%2010.09.22%20AM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
This style is the cleanest option, hiding the navigation into a mobile-style drawer and keeping consistency between mobile and desktop devices.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/afcf19a5-0d94-4d8c-bc9e-4f322d9e68a5/Untitled%20design%20(22).png" alt=""><figcaption></figcaption></figure>

When the menu text or icon is clicked, the slide-out mobile drawer is displayed on both desktop and mobile.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/d79bcd56-7095-4ae8-9fed-aff16bac8ccb/Screenshot%202023-12-01%20at%2010.11.39%20AM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Select a** **menu** to be displayed in the header.

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

* Check the box **Show social media icons** to show your social media (clickable icons) in your header.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/506ee95e-4750-4f7f-bcc4-b2f5cd91ca2c/Screenshot%202023-12-01%20at%2011.14.17%20AM.png" alt=""><figcaption></figcaption></figure>

* Check the box **Show separator line** to show the separator line (clickable icons) below your header.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/41f35d66-a7e6-489a-8c02-5de455ba7059/Screenshot%202023-12-01%20at%2011.09.48%20AM.png" alt=""><figcaption></figcaption></figure>

* Check the box **Enable sticky header**: Using a sticky header on your store offers several advantages that can enhance the user experience, improve navigation, and potentially increase conversions. A sticky header refers to a navigation menu or header that remains fixed at the top of the webpage even as the user scrolls down.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/e21e9fc1-9101-4fd3-b04d-71e9d712ce86/Screenshot%202023-12-01%20at%2011.11.50%20AM.png" alt=""><figcaption></figcaption></figure>

### 4. Mega menu block settings:

The **Mega menu block** allows you to create visually rich mega menus that highlight collections, promotions, or featured content directly within navigation.

* **Menu item:** Enter the exact name of the menu item you want to apply the mega menu to.
* **Color scheme:** Controls the background and text colors of the mega menu dropdown, based on predefined theme styles.
* **First image:**
  * **Image:** Upload the image to display in the mega menu.
  * **Label:** Add a heading or caption for the image.
  * **Link:** Assign a clickable link to the image.
* **Second Image**
  * **Image:** Upload a second image for additional visual content.
  * **Label:** Add a heading or caption for the image.
  * **Link:** Assign a link to the image.

<figure><img src="/files/1EC8hQbruSIDhqwLpvGb" alt=""><figcaption></figcaption></figure>


---

# 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://help.inspiredtheme.com/articles/header/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.