# Header

Replace the native header with your own HTML on your status dashboard.

Source: https://statusdashboard.com/docs/status-dashboards/code/header

Header HTML replaces the native status dashboard header with markup you provide. Use it for a navigation bar or announcement strip that matches your main website.

***

## Common uses
When Header HTML is set it **replaces the native StatusDashboard header entirely** — the default branding bar is removed and your HTML is rendered full-width at the very top of the page. The platform's status bar (the slim bar showing the overall system status indicator, optional Support link, and theme toggle) will still appear directly below your custom HTML. If the field is empty, the native header is shown as normal.

* Full branded header that matches your own website exactly
* Custom navigation bar with links back to your main site or support portal
* Announcement banner above all status content

## Example — full branded header
```html
<header style="background:#0f172a;color:#fff;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;">
  <a href="https://acme.com" style="display:flex;align-items:center;gap:10px;text-decoration:none;">
    <img src="https://cdn.acme.com/logo-white.svg" alt="Acme" style="height:28px;" />
  </a>
  <nav style="display:flex;gap:24px;font-size:14px;">
    <a href="https://acme.com" style="color:#94a3b8;text-decoration:none;">Home</a>
    <a href="https://acme.com/support" style="color:#94a3b8;text-decoration:none;">Support</a>
  </nav>
</header>
```

## Fixed headers and margin-top
For a fixed/sticky header, add `position: fixed` to your markup and use [Custom CSS](/docs/status-dashboards/code/css) to push the page content down:

```css
/* adjust 60px to match your header's actual height */
main { margin-top: 60px; }
```

## Behavior
* When set, the native header is **hidden** and replaced by your HTML. When empty, the native header is shown.
* Your HTML renders full-width, outside the page's content width constraint. Platform content below your custom header is capped at 1024px.
* Standard HTML, inline styles, `<script>` tags, and `<style>` tags are all supported.
* No automatic top spacing is applied when a custom header is active — use `margin-top` on `main` via [CSS](/docs/status-dashboards/code/css) if needed.
* When your custom header is fixed, remember that the platform action bar (see below) will still sit below it in the normal flow. Your spacing rules may need to account for both your header height **and** the action bar.

### Platform action bar
The platform's action bar (the slim bar containing the overall status indicator and other important links) renders **immediately after** your custom header HTML.

* It participates in normal document flow.
* When a custom header is active, the action bar is **not sticky** (it scrolls away with the rest of the page content). This is different from the native experience, where the header is fixed and the action bar becomes sticky beneath it.
* You can target it with Custom CSS if you want to style it (for example, to match your branding or blend it in):

  ```css
  nav[aria-label="Dashboard status bar"] {
    background-color: #f1f5f9; /* e.g. light gray background */
  }
  ```