Header

Header replaces SharePoint's rigid grey site header with a fully branded one - your logo, colours, fonts, navigation style and background. It has two parts:

• a Header Designer web part - the control panel where you design and save the header;
• a Header Customiser extension - applies the saved header site-wide automatically once deployed.

Permissions

Header needs no Microsoft Graph permissions. It uses SharePoint's own APIs as the signed-in user.

Set up

1. Install the package (see the Install guide).
2. On any page, edit → add the Header Designer web part to open the control panel. You can keep it on a hidden admin page; the header itself renders everywhere regardless.
3. Design your header, then click Apply. The saved configuration is rendered site-wide by the extension.

Two ways to build a branded header

Start from a preset - they are arranged in the order we would recommend trying them.

• Compose it (recommended) - your logo as an image on a solid colour band, with the navigation flowing after it. Leave navigation alignment on Auto and the links sit after the logo automatically, at every screen size, on every monitor. Nothing scales and there is nothing to reposition later. If your banner is a logo block on a flat colour, this reproduces it exactly and holds up better than an image of the same thing. Start with the Brand block and colour preset.
• One finished image - for a banner that genuinely cannot be rebuilt from a logo and a colour, for example an illustration where the artwork and the wordmark are one piece. The navigation floats over the image and you position it yourself, which means re-checking that position whenever the artwork changes. Use the Artwork-first header preset, and set Image fit to Fit width so the artwork and the band always agree on their height.

If you are choosing between the two, compose. Positioning navigation over an image is the only part of Header that depends on coordinates rather than layout, so it is the only part that can drift when a window, a monitor or the artwork changes.

What you can configure

• Layout - height, alignment, and how the logo, title and navigation sit together.
• Navigation - several nav styles (underline, pills, hub-nav end-cap and more), with your own links.
• Colours - background, text and accent colours, computed for accessible contrast.
• Background - solid, gradient or image.
• Logo & fonts - upload a logo and choose typography.

Apply, reset, import/export

• Apply publishes the current design site-wide; Reset reverts to the SharePoint default.
• Export / Import lets you save a header design to a file and reuse it on another site or tenant.

Changes appear after you click Apply and reload. If you don't see the header, confirm the package is deployed "to all sites" and your tenant is activated.

How it loads

The header renders through Microsoft's supported SharePoint Framework extension point (the Top placeholder), which runs just after the page framework loads. On slower connections you may briefly see the default SharePoint header before the custom one applies - this is normal for every SPFx extension and is the trade-off for being fully supported and upgrade-safe rather than relying on unsupported DOM hacks that break on Microsoft updates. The app hides the native header as early as it can to keep the transition minimal; on typical connections it's imperceptible. See the FAQ for more.