The SharePoint Online site header - the bar across the top with your logo, site title and navigation - is one of the most-seen and least-flexible parts of any intranet. Microsoft gives you a handful of options, but anyone who has tried to match a corporate brand quickly hits the limits. This guide covers exactly what you can change out of the box, where the walls are, and how to get a fully branded header.
What you can change natively
From Settings → Change the look → Header, SharePoint lets you adjust:
- Layout - standard, compact, minimal or extended.
- Background - one of a few preset shades tied to your theme.
- Site logo and an optional thumbnail.
- Header navigation - the link list, and whether it sits on the header or below.
Where the native options stop
The constraints are what frustrate most administrators:
- You can't set an arbitrary background colour or a gradient/image - only theme-derived presets.
- You can't control typography (font family, weight, sizing).
- You can't build a real mega-menu or multi-level navigation in the header.
- You can't add a custom call-to-action button (e.g. "Book a demo") to the header.
- Changes apply per site - there's no simple "brand every site the same way" switch.
The supported way to go further: SPFx extensions
Microsoft's supported extensibility model for the header is an SPFx Application Customizer - a small, client-side component that renders into the header placeholder on every page. This is the right approach (no unsupported DOM hacks, survives Microsoft UI updates), but building and maintaining one in-house is a development project in itself.
This is exactly what SharePoint Kit Header packages up: a Header Designer control panel where you design the header - layout, multi-level navigation, colours computed for accessible contrast, fonts, and a solid / gradient / image background - and an Application Customizer that renders the saved design site-wide. No code, and you can export a design to reuse on another site or tenant.
A practical checklist for a branded header
- Decide the layout: where the logo, title and navigation sit.
- Set brand colours - and check contrast so text stays legible (WCAG AA).
- Pick a navigation style and build your menu (keep top-level items to ~5-7).
- Add a logo at 2x resolution so it stays crisp on high-DPI screens.
- Decide on a header CTA if you want one (e.g. a service-desk or booking link).
- Apply, then test on mobile and in dark mode.
Related
- SharePoint Kit Header - the product overview.
- Header setup guide - install and configuration steps.
- How to make SharePoint look modern.