> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/content/sections/header.md).

# Header

### Section overview

The theme header section renders the site header for navigation and key actions. It supports background media, flexible row or column layouts, and separate default and overlay style states for color and border behavior.

#### Common use cases

* Building global header navigation and utility actions.
* Configuring different visual states for default and overlap scenarios.
* Arranging header content in row or column-based layouts.
* Managing responsive visibility and spacing for header content.

#### Usage tips

* Keep logo and navigation hierarchy clear before adding additional header blocks.
* Verify default and overlay color combinations against banner-heavy pages.
* Test row and column alignment choices on mobile and desktop breakpoints.
* Use block wrap carefully to avoid crowding in narrow viewports.

### Section settings

| Setting                          | Description                                           |
| -------------------------------- | ----------------------------------------------------- |
| Enable background image or video | Turns on background media rendering for the header.   |
| Image background desktop         | Background image used on desktop.                     |
| Image background mobile          | Optional background image override for mobile.        |
| Video background                 | Optional background video source.                     |
| Show video on mobile             | Enables background video playback on mobile devices.  |
| Show entire image                | Displays full image rather than cropping to fill.     |
| Top spacing                      | Adds top padding to the header container.             |
| Bottom spacing                   | Adds bottom padding to the header container.          |
| Enable x padding                 | Adds horizontal inner padding.                        |
| Gap size                         | Controls spacing between child layout elements.       |
| Default color scheme             | Header color scheme used in the default state.        |
| Overlay color scheme             | Header color scheme used when overlap mode is active. |
| Default color border             | Border color used in the default state.               |
| Overlay color border             | Border color used when overlap mode is active.        |
| Border position                  | Controls where borders appear.                        |
| Direction                        | Sets row or column layout for header children.        |
| Row x alignment                  | Horizontal alignment used in row layout.              |
| Row y alignment                  | Vertical alignment used in row layout.                |
| Column x alignment               | Horizontal/content alignment used in column layout.   |
| Column y alignment               | Vertical alignment used in column layout.             |
| Enable block wrap                | Allows child blocks to wrap to additional lines.      |
| Enable margin                    | Applies global horizontal margin settings.            |
| Visibility                       | Controls device visibility (all, mobile, or desktop). |

#### Show advanced settings

The header includes **Show advanced settings** (checkbox, default off). When enabled, it reveals **Enable mobile margin** and **Mobile margin** (when **Enable mobile margin** is on).

### Block settings

This section supports:

* `_g__flex-item` blocks for header layout composition.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.brickspacelab.com/slab/content/sections/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.