Header Builder

The Header Builder lets you assemble your site’s header visually, without touching code. Add logos, icons, links, buttons, and menus, then fine-tune their spacing, colors, and typography until the header matches your brand.

Access it via Theme Settings » Header.

Reference image — replace before publishing16:9

The Header Builder screen under Theme Settings » Header, showing the Top Bar and Navbar rows with the element list and the drag-and-drop canvas.

What you can build

The header is made of two stacked areas you can customize independently:

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

Across both, Nexgen supports:

• Multi-logo — separate logos for desktop and mobile (responsive logo).
• Any icon — attach icons to links for visual cues.
• Custom links and buttons — including multiple button styles.
• Conditional menus — show different menus based on your conditions.
• Free ordering — drag elements to arrange them exactly how you want.

Tip

Elements you add here inherit your Global Style colors and fonts by default. Set those first, and the Header Builder mostly becomes about layout and placement.

Top Bar

The Top Bar is the optional strip at the very top of your header. Add Link and Link with icon elements, then style the bar with the options below.

Group	Option	What it controls
Elements	Link, Link with icon	The items you can add to the Top Bar.
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, Text Hover	Link color and its hover color.
Link Typography	Font Type, Family, Style, Size, Weight, Line Height	Full typography control for Top Bar links.

Navbar

The Navbar is the main header row. It supports a richer set of elements and styling states.

Elements you can add

Element	Description
Brand	Your logo, including a Logo and a Responsive Logo for mobile.
Menu	Your navigation menu (assigned under Appearance » Menus).
Search Icon	Opens the search dialog.
Cart Icon	Shows the shopping cart (for WooCommerce stores).
Button	A call-to-action button, available in multiple styles.
Link	A plain text link.
Link with icon	A text link paired with an icon.

Navbar options

Group	Option	What it controls
Section Layout	Max Width	The maximum width of the Navbar’s content.
Section Color	Background (Holder, Sticky, Dropdown)	Background color for the default header, the sticky header on scroll, and dropdown menus.
Logo Image Layout	Width Type (Auto / Custom), Width, Height	How the logo is sized.
Link	Space Between, Text Color + Hover, Typography	Spacing, colors, and typography for Navbar links.
Button	Background + Hover, Text Color, Typography	Styling for Navbar buttons.

Note

The Section Color background can be set separately for three states — the normal Holder, the Sticky header that appears as visitors scroll down, and the Dropdown panels of your menu — so each can have its own look.

Caution

For the Menu element to display anything, you must first create a menu and assign it to a location. See Navigation Menu for the setup steps.