> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/customization/publish-your-docs/header-element.md).

# Header (Element)

The Header component provides functionality for sticky behavior, hide-on-scroll effects, and accessibility features like skip links. It is configured primarily through data attributes on the header element.

## Example HTML of the header:

The `.header-wrapper` is to be treated like an invisible container not meant for styling but for functionality. Styling should be delegated to the .header when needed.

```html
<!-- Invisible container used for behavior and interaction -->
<header class="header-wrapper" 
        data-sticky-header="true" 
        data-hide-on-scroll="true" 
        data-hide-at="200" 
        data-show-on-scroll-up="true"
        data-skip-link="true">
        <!-- Your actual header for content and styling -->
        <div class="header">  
                <!-- Header Content -->
        </div>
</header>
```

## Data Attributes Configuration

<table data-full-width="false"><thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>data-sticky-header</code></td><td><code>boolean</code></td><td><code>false</code></td><td>When set to <code>"true"</code>, enables the sticky header logic, including scroll-based class toggling.</td></tr><tr><td><code>data-hide-on-scroll</code></td><td><code>boolean</code></td><td><code>false</code></td><td>When set to <code>"true"</code>, allows the header to be hidden on the user scrolling down the page.</td></tr><tr><td><code>data-show-on-scroll-up</code></td><td><code>boolean</code></td><td><code>false</code></td><td>If <code>"true"</code>, the header will hide when scrolling down and reappear as soon as the user scrolls up. If <code>"false"</code>, the header stays hidden once past the threshold. <mark style="color:$warning;">This requires:</mark> <mark style="color:$warning;">data-hide-on-scroll="true"</mark></td></tr><tr><td><code>data-hide-at</code></td><td><code>number</code></td><td><code>200px</code></td><td>The pixel threshold (scroll distance from top) before the hiding logic is activated. <mark style="color:$warning;">This requires: data-hide-on-scroll="true"</mark></td></tr><tr><td><code>data-overlay-header</code></td><td><code>boolean</code></td><td>false</td><td>If <code>"true"</code>, the header will sit on top of the hero on every page. if <code>data-sticky-header="true"</code> as well it will sit on top of the hero and stick with the users scroll.</td></tr><tr><td><code>data-overlay-header-offset</code></td><td><code>boolean</code></td><td>false</td><td>If <code>"true"</code>, the hero section will make the exact space necessary so that header doesnt overlap the content within the hero. <mark style="color:$warning;">This requires: data-overlay-header="true"</mark></td></tr><tr><td><code>data-skip-link</code></td><td><code>boolean</code></td><td><code>false</code></td><td>When set to <code>"true"</code>, automatically injects an accessible "Skip to main content" link at the start of the header targeting the <code>&#x3C;main></code> element.</td></tr></tbody></table>

***

## Behavioral Details

### CSS Variables

The script automatically calculates the header height and sets a global CSS variable:

* `--header-height`: Updated on load, resize, and content changes using `ResizeObserver`.
* This allows you to use this variable site wide and integrates with ACSS without needing to manually enter these values.

### Sticky Header (hide on scroll) Class States

The component toggles the following classes on the `.header-wrapper` element when the header is using `data-sticky-header` and `data-hide-on-scroll`:

* `.scrolling`: Added when the window is scrolled more than 0px from the top. Use this for adding shadows or reducing padding on scroll.
* `.hide`: Added when the scroll logic determines the header should be hidden.

## Hide Logic Modes

1. **Static Hide (default)**:
   * Requires: `data-hide-on-scroll="true"` and `data-hide-at="[threshold]"`.
   * Behavior: Header hides once you scroll past the threshold and stays hidden.
2. **Responsive Hide (Scroll Up)**:
   * Requires: `data-hide-on-scroll="true"`, `data-hide-at="[threshold]"`, and `data-show-on-scroll-up="true"`.
   * Behavior: Header hides past the threshold when scrolling down. It immediately reappears when the user scrolls back up (with a 5px tolerance).

## Skip Link

If `data-skip-link="true"` is set:

* An `<a>` tag with class `.skip-link` is prepended to the header.
* The first `<main>` element on the page is automatically given `id="main"` if it doesn't have one.


---

# 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://docs.nickarce.com/customization/publish-your-docs/header-element.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.