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 action bar (overall status indicator, Subscribe/API/Support links when enabled, and the light/dark toggle) still appears 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

What the native header provides

When you replace the header, the platform no longer renders:

• The header logo and page title link from Branding
• Header links from Branding
• The SSO user menu (when dashboard SSO is enabled)

The main logo on the home page is separate and still appears when configured, even with a custom header. Include your own logo in custom header HTML if you want branding at the top of every page.

Example — full branded header

The example below uses fixed dark styling. It looks the same whether the visitor chooses light or dark mode. For a header that adapts to the theme toggle, see Light and dark mode below.

<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

For a fixed header, add positioning to your markup (for example position: fixed; top: 0; left: 0; right: 0; z-index: 50). The platform does not add top spacing when a custom header is active.

Use Custom CSS to push the platform chrome below your header. The action bar sits between your header and the main content, so offset the action bar at minimum:

/* adjust 60px to match your header height */
nav[aria-label="Dashboard status bar"] {
  margin-top: 60px;
}

If you also need extra space before the main content area, add margin-top on main as well.

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 1024px content constraint. Platform content below your custom header uses that width cap.
• Standard HTML and inline styles are supported. <style> tags in your HTML are inserted into the page and apply like ordinary stylesheets (prefer the CSS tab for site-wide rules). <script> tags are not executed when injected this way; use Custom JS for executable script (chat widgets, analytics, and similar).
• No automatic top spacing is applied when a custom header is active.
• When your custom header is fixed, the platform action bar remains in normal document flow directly below your HTML (see below).
• Maximum length: 50,000 characters.
• Changes take effect when updated custom code arrives from the status API: on the next full page load, or within about 30 seconds for visitors who already have the page open (status data polls in the background).

Platform action bar

The platform action bar 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 page). With the native header, the header is fixed and the action bar becomes sticky beneath it.

• Target it in Custom CSS with nav[aria-label="Dashboard status bar"]:

  nav[aria-label="Dashboard status bar"] {
    background-color: #f1f5f9;
  }
  
  .dark nav[aria-label="Dashboard status bar"] {
    background-color: #1e293b;
  }

Light and dark mode

Every eligible page includes a light/dark toggle in the platform action bar, directly below your custom header. When a visitor switches modes, the page body and platform content update automatically. Your custom header HTML does not change unless you style it for both modes.

Fixed inline colors (like the example above) stay the same in light and dark mode. That often creates a visible seam: a dark header band above a light page, or the reverse. Logos can also fail contrast if the header background does not match the mode the visitor chose.

Recommended approach

1. Add a class or id to your header root element (for example, sd-custom-header).
2. Put light-mode styles in Custom CSS as the default.
3. Add matching rules prefixed with .dark for dark mode.

Example — theme-aware header

Header HTML (Custom Code → Header):

<header class="sd-custom-header">
  <a href="https://acme.com" class="sd-custom-header__brand">
    <img
      class="sd-custom-header__logo sd-custom-header__logo--light"
      src="https://cdn.acme.com/logo-dark.svg"
      alt="Acme"
    />
    <img
      class="sd-custom-header__logo sd-custom-header__logo--dark"
      src="https://cdn.acme.com/logo-white.svg"
      alt="Acme"
    />
  </a>
  <nav class="sd-custom-header__nav">
    <a href="https://acme.com">Home</a>
    <a href="https://acme.com/support">Support</a>
  </nav>
</header>

Custom CSS (Custom Code → CSS):

.sd-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  background: #ffffff;
  color: #0f172a;
}

.sd-custom-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sd-custom-header__logo {
  height: 28px;
  width: auto;
}

.sd-custom-header__logo--dark {
  display: none;
}

.dark .sd-custom-header {
  background: #0f172a;
  color: #ffffff;
}

.dark .sd-custom-header__logo--light {
  display: none;
}

.dark .sd-custom-header__logo--dark {
  display: block;
}

.sd-custom-header__nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.sd-custom-header__nav a {
  color: #64748b;
  text-decoration: none;
}

.dark .sd-custom-header__nav a {
  color: #94a3b8;
}

If you style the platform action bar to blend with your header, include dark-mode rules for it as well:

nav[aria-label="Dashboard status bar"] {
  background-color: #f1f5f9;
}

.dark nav[aria-label="Dashboard status bar"] {
  background-color: #1e293b;
}