Header colours
The header’s colours live at Appearance → Customize → Design → Header. This page is the practical version; for what each skin actually presets, see Header skin.
Start with the skin
Header skin — Light (default) or Dark.
Light means “follow the page”: the bar takes your background colour and your text colour, and the hairlines and the dropdown follow suit.
Dark gives the bar a near-black background with white text, and — the part that matters — also lightens the hairlines, the dropdown panel and the hover colour, so the whole bar is consistent rather than just inverted.
Pick the skin first. The two pickers below it are the fine-tune, and they win over whatever the skin set.
The two pickers
| Setting | Empty means |
|---|---|
| Header background color | use the skin |
| Header text color | use the skin |
Leave both empty unless you want a specific colour. A brand-coloured bar is the usual reason to fill them in:
- Set Header background color to your brand colour.
- Set Header text color to whatever reads on it — white on a dark brand colour, near-black on a light one.
- Check the header border: on a coloured bar, None usually reads better than a line.
If your brand colour is dark, start from the Dark skin and then override the background — that way the dropdown and the hairlines are already on the light side and you only have one picker to fill in.
The menu’s own colours
Under the Navigation heading in the same section:
| Setting | What it colours |
|---|---|
| Menu color | top-level menu links |
| Menu hover color | those links under the pointer, and the current page |
| Menu hover background | a block of colour behind the item on hover and for the current page |
| Dropdown background color | the sub-menu panel |
| Dropdown text color | links inside it |
| Dropdown hover color | those links under the pointer |
All six are empty by default, which means “follow the skin”. Fill one in only when the skin’s answer is wrong for you.
Menu hover background is the one that changes the feel of the bar most: empty is no block at all, which is the theme’s own menu. Give it a colour and each top-level item gets a highlight on hover and on the current page. The padding the block needs is taken back out of the space between items, so the menu sits in exactly the same place whether you use it or not.
Also here
- Header height and border
- Menu typography — face, size, weight, tracking and case for the menu
- The text logo colour is not here; it sits in Site Identity, with the masthead it belongs to.
Accessibility
Whatever you pick, keep the menu text at 4.5:1 against the bar behind it. The built-in skins pass; a custom pair is your own to check. The theme also makes sure a menu link changes on hover by something other than colour alone where it can — but a hover background you choose is yours to get right.