# Header

This section includes multiple header styles, allowing you to easily customize the main header's appearance.

The header typically contains your store’s logo, main navigation menu, and other elements like a search icon, cart icon, account icon, country/region selector, and social media links. It plays a key role in branding, helping visitors navigate, and highlighting important pages.

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

### **A. Header settings:**

* Click the Header section to open its settings.
* The Cart icon offers two options: **Cart**, **Bag** or **Text**. You can choose between the icon or text style for the cart icon.
* **Sticky header:** controls how the header behaves when users scroll the page.&#x20;

> 1. **None**: The header is not sticky and scrolls away with the page.&#x20;
> 2. **Always**: The header remains fixed at the top of the screen at all times, ensuring constant access to navigation and key elements like search, cart, or account icons.

* **Social media icons**: Use the "Show social media icons" checkbox to display icons. Add links in [***Theme settings > Social media***](/theme-settings/social-media.md), and include the full URL (e.g., https\://).
* **Search:** Configure search settings in [***Theme settings > Search***](/theme-settings/search.md), and enable the mobile search bar if you want it displayed below the header.
* **Notifications:** Configure notification settings in [***Theme settings > Notifications***](/notifications.md), and toggle the bell icon on or off in the header.
* **Logo settings**: Replace the store title with a logo image and change the logo position on desktop & mobile.

{% stepper %}
{% step %}
**Logo image**&#x20;

Click **Logo image** and use the file selector to select or upload your logo file. Use the **Logo width** slider to make your logo larger or smaller on either desktop or mobile. We recommend a logo image with a transparent background.

***Note**: The name of your store displays when no logo image is uploaded. The logo height will change to match the width.*
{% endstep %}

{% step %}
**Desktop logo position**

Adjust the logo position to the left or center on the desktop screen:&#x20;

* *Middle left:* Classic layout with the logo on the left.

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

* *Middle left, menu centered:* Logo on the left, navigation in the center for balanced branding.

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

* *Top left:* Logo at the top left, leaving more vertical space for menus.

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

* *Top center, menu centered below/above:* Places logo at the top center, ideal for symmetrical or luxury brand aesthetics.

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

* *Middle center:* Logo in the center of the header, perfect for minimal layouts or strong brand focus.

<figure><img src="/files/SMwP8yP1M88uGXteBCHq" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Mobile logo position**

Choose **Left** to display the logo on the left (menu shifts right of the cart icon) or **Center** to position it centrally.

<figure><img src="/files/TEou8perEiIdlJnpHP6Y" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

* **Transparent header:** Enable a transparent header background when at the top of the page. You can use an alternate logo, a brand message (such as a tagline) and text color.

{% hint style="info" %}
Ensure the first section on your page is a slideshow, video banner or image banner for best results.
{% endhint %}

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

* **Country/region selector:** Enable the **Country selector** to let customers view your products with their preferred currency. The selector displays countries with their currencies supported in your Shopify Market settings.
* **Language selector: Poetic** **Theme** supports selling in multiple languages. After you have added and published languages to your store, enable the **Language selector** to let customers select their preferred language.

{% hint style="info" %}
**Note**: *For screen widths between 1024px and 1300px, the country/region and language selectors will display in compact format.*
{% endhint %}

* The header section has a group of settings called "**Highlight**": You can highlight specific header items. Enter the exact name of the text you’d like to highlight. Use the color picker to adjust the highlight color.

### **B. Header blocks**

#### **1. Main menu block:**

* **Menu:** Select a menu to display in the header from the available navigation menus.
* **Open menu on hover:** If enabled, submenu items will open automatically when a user hovers over the parent menu item (instead of requiring a click).
* **Mega menu:** Advanced navigation settings for creating a wide-format menu.

#### **2. Menu promotion card block**

Display featured images with promo text, and call-to-action button within the mega menu.

#### **3. Menu full width banner block**

Unlike adding multiple promotion card images in the mega menu, you can add a full-width banner under the menu items with this block.

#### 4. Hero banner block

The Hero banner block displays a high-impact visual on the Header section, featuring scrolling text over an image. It’s ideal for showcasing brand messaging, promotions, or seasonal highlights at the very top of your site.

### **C. Sub-articles**

{% content-ref url="/pages/RSjCfjcmm09uN1YWmUcq" %}
[Menu promotion card block](/header-group/header/menu-promotion-card-block.md)
{% endcontent-ref %}

{% content-ref url="/pages/QeOVwrXl8YzyjL24OTpX" %}
[Menu full width banner block](/header-group/header/menu-full-width-banner-block.md)
{% endcontent-ref %}

{% content-ref url="/pages/c71H5OBE3JZFpKfQC1Kr" %}
[Hero banner block](/header-group/header/hero-banner-block.md)
{% endcontent-ref %}

{% content-ref url="/pages/X9YPYXgAj7TEfLVdvoFc" %}
[Transparent header](/header-group/header/transparent-header.md)
{% endcontent-ref %}

{% content-ref url="/pages/7U0sBGlabePgWBc6iSl8" %}
[Mega menu](/header-group/header/mega-menu.md)
{% endcontent-ref %}

{% content-ref url="/pages/LJcmslDtPlwWTucn0AFp" %}
[Customer account](/header-group/header/customer-account.md)
{% endcontent-ref %}

{% content-ref url="/pages/a8oH8HBHSQz6l2pdaOem" %}
[Search](/header-group/header/search.md)
{% endcontent-ref %}


---

# 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.byinspiredlabs.com/header-group/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.