Introduction

Header Builder is a drag-and-drop editor to help you build and customize your own headers.

Display a header

To display a default header for all pages on your site, pick up a header from below list.

One unique point of Header Builder is that it allows you to attach a default header either for all your pages, or a specific page you like. Click here to learn how to attach a header on a single page.

Configure a header

To configure a header, go to Header Builder settings.

Add a header

Step 1: click on “Add New” button
Step 2: choose either “Horizontal layout” to create a new horizontal header, or “Vertical layout” to create a vertical header.

Manage Headers

Here you can rename, edit, duplicate, or delete any header that you have created before.

To delete a header, you can also go into a header’s detail page and click on Delete, then choose OK to confirm deletion.

Set a header to default

To make a header appear on your live site, you have to set the header to default. You can either set default header for all of your pages, or for a specific page. Here is how to do it.

For all pages

There are 3 ways to set a header to default for all pages

Click on “set to default” on header list

Go into each header page and click on “set to default” button.

Using Header sub-panel on Nitro Customizer

Click here to learn how to add a default header on Nitro Customizer.

For a specific page

Step 1: Get into the page that you want to set header, then click on “Edit Page”.

Step 2: choose your default header layout from the dropdown list.

Note: a default header cannot be deleted. So if you want to delete a default header, please set another header as “default”, then you can delete that header.

Header settings

Header For Mobile

You can make header separately for mobile devices.

You can also switch between mobile header and desktop header as well.

All elements on mobile are all the same as desktop layout

Import/Export

To import/export a header with settings and content, look for import/export button on top menu of header page.

Load template

Click “Load template” or “Choose Template” button to pick one of many ready-made header designs

13 templates for horizontal layout
4 templates for vertical layout

Header setting

General settings: contain all layout and styling options for your header.
Background: you can either upload your own background image or use plain background color.
Spacing: you can change the space between different elements on the header.

Note: General settings (except the Background and Spacing tabs) are different depending on your chosen layout – Horizontal or Vertical Header.

For Horizontal Header

Header’s position

To change header settings, click on “settings” button on top menu of header page. Here you can change header position from “normal” to “fixed”.

Normal Header: header displays on all pages
Fixed Header: header displays on only specific pages

For Vertical Header

Header position

To change header settings, click on “settings” button on top menu of header page. Here you can change header position from “left” to “right”.

Row & Container

Row

A row can contain one or many elements. One header can have many rows. Inside each row is a container.

Drag to add new rows, delete rows, or customize any row you like.

To modify a row, click on “row and container settings” button. Then you can change background and border style for a row or a container.

Mark a row as sticky (Sticky Menu)

You can make your header sticky by marking a row as sticky.

Note: you can only set one row to “sticky” on one active header.

Container

A container is the box for a single row that contains one or many elements.

Options:

Spacing: change spacings for border
Border color: pick up a color for border
Border style: pick up a style for border
Background image: pick up a background image for header
BG color: pick up a background color for header
Width: change header’s width (in px or in %)

Header elements

You can use any in 8 below elements to build any header you want easily.

Search
Sidebar
Text
Logo
Socials
Menu
Cart
Flex

Drag and drop to add or change the position of any element on your header. To configure any element, just click on it.

Search

By default, “search” element uses WordPress search. Therefore, if you want to use live search on that header, you have to activate “WR Live Search”.

Then back to Search settings, enable “Live search”. Here you can customize how live search works on your website.

Options:

Layout style: pick up a style for search layout
Background style: choose a style for search screen background
Icon color & Icon size: customize color and size for search icon
Live Search: enable “live search”, and choose to “show category list” and “show suggestion”
Search in: choose a range to search

Menus

General

In order to change menu settings, first you have to choose a menu. To create or edit a menu’s items, click on Dashboard > Appearance > Menus, and choose a menu that you want to modify.

For each menu, there are 2 layout styles: Text and Icon. These layout styles go along with settings for each one.

Text layout

With text layout, the menu appears as vertical menu list with dropdown sub-menus.

Here are all settings for menu with text layout

Icon layout

With icon layout, the menu appears as a hamburger icon on the header.

There are 2 types of icon layout: Full-screen and Sidebar.

Full-screen

The menu appears full-screen on click with either background image or plain background color.

Sidebar

The menu appears on sidebar on click.

Text setting

In this tab, you can change text style and size for your menus.

Submenu

Move to “Submenu” tab to see settings for submenu. Here you can choose animation, as well as text style of submenu.

Sidebar

To modify a sidebar, first you have to choose one sidebar from the dropdown menu.

To add or change elements for a sidebar, go to Dashboard > Widgets, and drag any elements on the sidebar you want to modify.

Options:

Select a sidebar: pick up a sidebar
Position: change position for the sidebar
Animation: pick up an animation effect for the sidebar
Width: change sidebar’s width
Icon color: change color for all icons on your sidebar

To change text style for your sidebar, move to Text setting tab. To change background or use plain background color for the sidebar, move to Background tab.

Text

Edit text element is like edit a post. Here you can add media (picture, video), or change text style.

Logo

There are 2 types of logo: Text logo and Image logo.

Text logo

This is a text logo on your header.

Options:

Logo content: change logo’s text
Font family & font weight: change font style for text logo
Color: change color for logo
Font size: increase or decrease font size for logo
Font style: change font style from underline to italic or vice versa
Line height: change height between 2 lines on text logo
Letter spacing: change spacing between 2 letters on text logo

Image logo

This is an image logo on your header.

For image logo, you can upload and change size for your own logo.

Socials

In order to show social icons on header, you have to insert social links via Customizer settings. Then configure “socials” element on Header Builder.

On Header Builder, click on Socials element that you have added before, then tick/untick any social icons that you want to display or hide on the default header. You can also customize social icons’ style here.

Cart

Here is the setting window for cart element. Here you can customize how the cart appears on your live site. Let’s see what you can configure your cart element.

Options:

Layout style: pick up a layout style for cart
Color style: pick up a color style for cart
Show cart info: choose an option to show cart info
Animation & Animation margin top: pick up an animation effect for cart icon and change top margin for animation

Flex

Flex allows you to automatically adjust your elements to make them equally align on a single row. Just add Flex anywhere you want to align your elements.

Here is a default header with a flex.