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

# Header 3

The Header section offers a clean and intuitive navigation experience, helping customers easily explore and access key areas of your store.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FVc8XuArs3jvi9QDQMQzx%2Fimage.png?alt=media&amp;token=c970aed7-7a6c-4ff2-b68f-72c1f4a4f062" alt=""><figcaption></figcaption></figure>

To customize the Header 3 in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (Customize), go to **Header Group**, then click **Add section**.
2. Locate **Header 3**
3. **Save**
   {% endhint %}

Before setting up the Header section, make sure you’ve configured it properly in **Theme Settings**.\
👉 The Header has two configuration parts: one in **Theme Settings** and another in the **Section**. Please follow the link below to set up the Header in Theme Settings first, then return here to complete the Section setup.

{% embed url="<https://vshop.gitbook.io/vshop/theme-settings/header>" %}

## **Section Settings**

Header 3 provides a minimal header layout with optional social media icons.\
This style is ideal for clean designs or stores focusing on branding and simplicity.

* **Color scheme:** Choose a color style for the header background and text.
* **Show social icons:** Enable to display social media icons such as Facebook, Instagram, or Twitter.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FHVNA8BsDe4mVHEkLXJfq%2Fimage.png?alt=media&amp;token=397dcbdf-7f7d-43e0-8b7e-d779fbba332d" alt=""><figcaption></figcaption></figure>

💡 **Tips:**\
Use this header when you want a **simple and elegant look**.\
Enable social icons to connect customers to your social media pages easily.

***

## Block Settings

The Header section includes multiple block types that allow you to build flexible navigation layouts.\
When adding a block, select the **block type** that fits your menu design and purpose.

* **Block: Menu Normal** – Use this block to create a **standard dropdown menu** with navigation links.
* **Block: Single Link** – Use for **a single navigation link** such as *Buy Now*, *Contact*, or *Track Order*.
* **Block: Multi Column** – Use this block to create a **mega menu** with multiple columns, product lists, or banner images.
* **Block: Banner Parent & Banner Child** – Use these blocks together to build **a banner-style mega menu**.
  * Add **Banner Parent** first as the main container.
  * Then add one or more **Banner Child** blocks inside it to display each banner item.

After selecting the desired block type, customize its content, links, and layout options according to your header design.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FEDqtOD9i98P2p12XqYy1%2Fimage.png?alt=media&amp;token=a6db1ff5-9806-45c2-b237-83bc475184f2" alt=""><figcaption></figcaption></figure>

### **Block: Menu Normal**

The Menu Normal block lets you add a simple dropdown menu with a title and link. You can also assign a label like Hot or New to highlight it.

👉Click the link below to view the detailed setup instructions for the **Menu Normal** block.

{% content-ref url="/pages/b69rzmDn0FjWKR7AtkjZ" %}
[Block: Menu Normal](/vshop/header-group/header/block-header/block-menu-normal.md)
{% endcontent-ref %}

***

### Block: Single Link

Adds a single navigation item or button to the header, typically used for quick-access links such as *Buy Now*, *Contact*, or *Track Order*.

👉Click the link below to view the detailed setup instructions for the **Single Link** block.

{% content-ref url="/pages/epZw8kNyR767Z8kUE4KE" %}
[Block: Single Link](/vshop/header-group/header/block-header/block-single-link.md)
{% endcontent-ref %}

***

### **Block: Multi Column**

Creates a **mega menu** layout with multiple columns, banners, and product links — ideal for stores with large product categories.

👉Click the link below to view the detailed setup instructions for the **Multi Column** block.

{% content-ref url="/pages/nRRRoAmLH66Nd8nk4iAB" %}
[Block: Multi Column](/vshop/header-group/header/block-header/block-multi-column.md)
{% endcontent-ref %}

***

### Block: Banner Parent & Banner Child

These two blocks work **together** to create a *banner-style mega menu*.

* **Banner Parent** is the **main container** — it defines the overall layout and holds all the child banners.
* **Banner Child** represents each **individual banner item** inside the parent block (e.g., a single demo or category image).

👉Click the link below to view the detailed setup instructions for the **Banner Parent & Banner Child**  block.

{% content-ref url="/pages/Go349UY94N2KZoKdiETK" %}
[Block: Banner Parent & Banner Child](/vshop/header-group/header/block-header/block-banner-parent-and-banner-child.md)
{% endcontent-ref %}