Accent Border

Usage

Open Appearance β†’ Customize β†’ Header & Menus β†’ Accent Border to add a thin brand stripe to the header. Enable the border, set Height, and choose a Color from your palette.

The stripe sits above the main masthead bar (below Utility Nav, if you use one) β€” a subtle accent without repainting the whole header.

When to use it

  • Matching a brand guideline that uses a signature color bar above navigation.
  • Separating a light header from a white page background when shadow alone is not enough.
  • Pairing with a transparent hero so the menu still feels anchored to the brand.

Tips

  • Start with a 2–4px height; thicker stripes read more like a second header band.
  • Pick a palette Accent or Primary color so the stripe stays consistent sitewide.
  • Accent border is independent of footer accent borders under Footer & Contact β€” you can use different colors on each end of the page.

Settings

Accent Border

Enable setting in the block editor sidebar
Enable
Height setting in the block editor sidebar
HeightAvailable when Enable is β€œUndefined”
Color setting in the block editor sidebar
ColorAvailable when Enable is β€œUndefined”
  • White
  • Gray
  • Dark
  • Text
  • Primarydefault
  • Secondary
  • Accent
  • Variant
  • Muted