H

Header Builder

Design 4 min read Entry 22 of 78
Definition

A header builder is a visual tool for designing the bar at the top of every page, instead of picking from a theme’s handful of preset layouts.

In plain English

You get a grid, usually three rows, each with a left, a centre and a right zone. You drop the logo in one, the menu in another, a button in a third, and style each one.

Blocksy and Astra put theirs in the Customizer, Elementor Pro puts its own in the Theme Builder. Same idea, different door.

Why it matters

The header is on every page, so it is the single most visible piece of design on the site. Being stuck with a preset that nearly fits is a daily annoyance.

It also handles the awkward cases: a transparent header over a dark hero, a different header on the home page, a sticky bar that shrinks on scroll.

How it works

  1. You choose a rowTop for an announcement, middle for the main bar, bottom for a secondary menu.
  2. Elements go into zonesEach with its own colours, spacing and responsive visibility.
  3. Behaviour is set per rowSticky, transparent, or hidden below a certain width.
  4. Mobile gets its own arrangementUsually the logo plus a menu button, with the rest inside the drawer.

Decide who owns the header

Theme builder or page builder, not both. Two headers fighting is one of the most common reasons a site shows a stray line or a doubled menu.