Header Builder

The Header Builder lets you assemble your entire header visually — no code required. Add logos, icons, links, buttons, and menus, then fine-tune spacing, colors, and typography until everything looks exactly right. You get a multi-logo setup (separate desktop and mobile logos), any icon you like, custom links and buttons, conditional menus, and the freedom to reorder elements however you want.

You can find it under Theme Settings » Header.

Reference image — replace before publishing16:9

The Header Builder screen under Theme Settings » Header, showing the Top Bar and Navbar areas with their draggable elements panel and the live preview on the right.

The header is made of two stacked areas:

• Top Bar — a slim strip above the main header, ideal for a phone number, email, or announcement links.
• Navbar — the main navigation bar with your logo, menu, and key actions.

Tip

Elements can be freely ordered within each area. Drag them into the arrangement that fits your design — logo left and menu right, centered logo, and so on.

Top Bar

The Top Bar is perfect for small, secondary links such as contact details or quick announcements.

Elements

Element	Description
Link	A simple text link.
Link with icon	A text link paired with an icon.

Options

Group	Setting	What it controls
Section Layout	Max Width	The maximum width of the Top Bar’s content.
Section Color	Background	The Top Bar’s background color.
Link Layout	Space Between	The spacing between links.
Link Color	Text	Default link color.
Link Color	Text Hover	Link color on hover.
Link Typography	Font Type, Family, Style, Size, Weight, Line Height	Full typographic control for the links.

Navbar

The Navbar is the main event — it holds your branding, navigation menu, and the actions you most want visitors to take.

Elements

Element	Description
Brand	Your logo, with a separate Responsive Logo for smaller screens.
Menu	Your navigation menu (supports conditional display).
Search Icon	Opens the site search.
Cart Icon	Shows the shopping cart (for WooCommerce stores).
Button	A call-to-action button, available in multiple styles.
Link	A simple text link.
Link with icon	A text link paired with an icon.

Note

The Brand element supports two logos: a primary logo for desktop and a Responsive Logo that takes over on mobile, so your branding always fits the screen.

Section options

Group	Setting	What it controls
Section Layout	Max Width	The maximum width of the Navbar’s content.
Section Color	Background — Holder	Background of the standard (default) navbar.
Section Color	Background — Sticky	Background when the navbar is stuck to the top on scroll.
Section Color	Background — Dropdown	Background of dropdown menus.

Sticky and dropdown states

You can style the Holder, Sticky, and Dropdown states independently — for example, a transparent navbar at the top of the page that becomes solid once the visitor scrolls.

Logo Image Layout

Setting	What it controls
Width Type	Choose Auto (natural size) or Custom (set your own dimensions).
Width	The logo’s width (when using Custom).
Height	The logo’s height (when using Custom).

Link settings

Setting	What it controls
Space Between	Spacing between links.
Text Color	Default link color, plus a Hover color.
Typography	Font Type, Family, Style, Size, Weight, Line Height.

Button settings

Setting	What it controls
Background	Button fill color, plus a Hover color.
Text Color	The button label color.
Typography	Font Type, Family, Style, Size, Weight, Line Height.

Related

• Navigation Menu — create the menu you assign to the Navbar.
• Global Style — set the colors and fonts the header inherits by default.
• Footer Builder