Appearance → Customize → Header → Header padding and Header border.
Padding — the height of the bar
The bar has no fixed height. It is as tall as its tallest item — the logo, or the menu — plus the padding above and below it. That is what Header padding sets, one value used for both.
| Choice | |
|---|---|
| None | The bar is exactly as tall as its contents. Very tight; useful with a large logo that already has whitespace baked in |
| 0.5em, 0.75em | Compact. Suits a dense news site with a sticky-feeling bar |
| 1em | The default |
| 1.5em, 2em | Roomier. The usual choice for a wordmark masthead |
| 2.5em, 3em, 4em | Generous. Works with Nav below, where the bar is a masthead and the menu is on its own row |
Mobile uses half of whatever you pick. A 4em bar on a phone would eat the screen before the reader has seen a headline, so the theme halves it below the tablet width. You do not set that separately.
To change the bar’s height without changing its padding, change the logo’s height or the navigation font size — those are the two things the bar is measured against.
Border — the edge under the bar
| Choice | |
|---|---|
| Light line | The default: a hairline in the theme’s border colour |
| None | No edge. Best when the header background differs from the page background, which draws the line for you |
| Shadow | A soft drop shadow. Suggests the bar sits above the page |
The border applies at every width, phones included.
With a dark skin or a coloured background, None is usually right: the colour change is already a stronger edge than a hairline, and drawing both looks like an accident.
On Nav below, the hairline belongs to the menu strip, so it runs the full window width rather than stopping at the content column.