# Header Section

**The header section** is the main navigation and branding component for the theme, providing a comprehensive dual-row layout system with support for mega menus, transparent header modes, sticky behavior, and extensive customization options.&#x20;

It includes multiple block types for different mega menu configurations and a vertical menu system for categories.

The block is added by default to the Header Group

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

#### Supported block types

| Block Type      | Description                                                                                            |
| --------------- | ------------------------------------------------------------------------------------------------------ |
| `menu_tab`      | Tab-style menu items for multi-brand or category navigation with SVG logo support                      |
| `mega_menu_1`   | Standard mega menu with 3-column grid layout and promotional banners                                   |
| `mega_menu_2`   | Enhanced mega menu with 4-column grid, brand links, and customizable promotional content               |
| `mega_menu_3`   | Advanced mega menu with product collections, flexible grid layout, and comprehensive promotion options |
| `vertical_menu` | Category menu with vertical dropdown, customizable styling, and color scheme inheritance               |

### Section Settings

| Setting                       | Type       | Description                                                                                                                                                                                                          | Visibility                                                                                         |
| ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Logo Width                    | range (px) | Width of the logo on desktop (min 50 — max 300).                                                                                                                                                                     | Visible when Logo is set                                                                           |
| Logo Width (Mobile)           | range (px) | Width of the logo on mobile devices.                                                                                                                                                                                 | Visible when Logo is set                                                                           |
| Logo Position                 | select     | Position of the logo inside the header (left/center/right).                                                                                                                                                          | Always visible                                                                                     |
| Logo Row                      | select     | Which row the logo sits in (top/bottom).                                                                                                                                                                             | Always visible                                                                                     |
| Menu                          | link\_list | The menu to use for the main navigation (e.g., main-menu).                                                                                                                                                           | Always visible                                                                                     |
| Menu Position                 | select     | Position of the menu within the header (left/center/right).                                                                                                                                                          | Always visible                                                                                     |
| Menu Row                      | select     | Which row the menu is placed in (top/bottom).                                                                                                                                                                        | Always visible                                                                                     |
| Icon Type                     | select     | Icon style for menu items (none/caret).                                                                                                                                                                              | Always visible                                                                                     |
| Link Size                     | select     | Size for link/button text inside the header (rem values mapped to px labels).                                                                                                                                        | Always visible                                                                                     |
| Button Font Weight (Link)     | select     | Font weight used for header links.                                                                                                                                                                                   | Always visible                                                                                     |
| Text Case                     | select     | Text transform applied to header links (none/uppercase/capitalize).                                                                                                                                                  | Always visible                                                                                     |
| Show Message                  | checkbox   | Toggle to show a promotional message bar in the header.                                                                                                                                                              | Always visible                                                                                     |
| Message                       | richtext   | Content of the promotional message (HTML allowed).                                                                                                                                                                   | Visible when Show Message is true                                                                  |
| Message Font                  | select     | Font family used for the message text.                                                                                                                                                                               | Visible when Show Message is true                                                                  |
| Message Size                  | select     | Font size for the message.                                                                                                                                                                                           | Visible when Show Message is true                                                                  |
| Message Position              | select     | Left or right alignment for the message.                                                                                                                                                                             | Always visible (message content controls visibility)                                               |
| Message Row                   | select     | Which row the message is placed in (top/bottom).                                                                                                                                                                     | Visible when Show Message is true                                                                  |
| Show Account                  | checkbox   | Toggle visibility of account actions (login/account link).                                                                                                                                                           | Always visible                                                                                     |
| Account Type                  | select     | Display type for account (text/icon/both).                                                                                                                                                                           | Always visible                                                                                     |
| Account Row                   | select     | Which row account actions appear in.                                                                                                                                                                                 | Visible when Show Account is true                                                                  |
| Show Search                   | checkbox   | Toggle header search visibility.                                                                                                                                                                                     | Always visible                                                                                     |
| Search Type                   | select     | Inline search style (frame/underline).                                                                                                                                                                               | Visible when Show Search is true and global search type is 'inline'                                |
| Search Position               | select     | Position of the search control (left/center/right).                                                                                                                                                                  | Visible when Show Search is true                                                                   |
| Search Row                    | select     | Which row the search sits in (top/bottom).                                                                                                                                                                           | Visible when Show Search is true                                                                   |
| Show Country                  | checkbox   | Show the country/region selector.                                                                                                                                                                                    | Always visible                                                                                     |
| Show Language                 | checkbox   | Show the language selector.                                                                                                                                                                                          | Always visible                                                                                     |
| Country Selector Style (Flag) | checkbox   | Show country flags in the localization control.                                                                                                                                                                      | Visible when Show Country or Show Language is true                                                 |
| Localization Font             | select     | Font used for localization controls.                                                                                                                                                                                 | Visible when Show Country or Show Language is true                                                 |
| Localization Size             | select     | Font size for localization controls.                                                                                                                                                                                 | Visible when Show Country or Show Language is true                                                 |
| Localization Type             | select     | Display type for localization (text/icon).                                                                                                                                                                           | Always visible                                                                                     |
| Localization Position         | select     | Position of localization controls (left/right).                                                                                                                                                                      | Visible when Show Country or Show Language is true                                                 |
| Localization Row              | select     | Which row localization controls appear in (top/bottom).                                                                                                                                                              | Visible when Show Country or Show Language is true                                                 |
| Gift Cards Enabled            | checkbox   | Show a gift card action/icon in header.                                                                                                                                                                              | Always visible                                                                                     |
| Gift Cards Link               | url        | Link target for gift cards (e.g., /pages/gift-cards).                                                                                                                                                                | Visible when Gift Cards Enabled is true                                                            |
| Actions Type                  | select     | Display style for header action buttons (text/icon/both).                                                                                                                                                            | Always visible                                                                                     |
| Actions Row                   | select     | Row for action buttons (top/bottom).                                                                                                                                                                                 | Always visible                                                                                     |
| Section Width                 | select     | Header content sizing: page-width or full-width.                                                                                                                                                                     | Always visible                                                                                     |
| Enable Sticky Header          | select     | Sticky header behavior for the header. Options: "always" (header stays fixed and visible), "scroll-up" (header hides on scroll down and reappears when scrolling up), "never" (no sticky behavior). Default: always. | Always visible                                                                                     |
| Divider Thickness             | range (px) | Divider thickness between header rows.                                                                                                                                                                               | Visible when any of Menu Row, Localization Row, Search Row, Account Row or Actions Row is 'bottom' |
| Divider Size                  | select     | Divider width option (page-width/full-width).                                                                                                                                                                        | Visible when any of Menu Row, Localization Row, Search Row, Account Row or Actions Row is 'bottom' |
| Border Width                  | range (px) | Border width around header rows.                                                                                                                                                                                     | Always visible                                                                                     |

You can find more detailed information about each block in the article '[Header Block Article'](/ella-7-documentation/header-group/header-blocks.md).


---

# 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://halosoft.gitbook.io/ella-7-documentation/header-group/header-section.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.
