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.
- 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.
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.
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 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
To import/export a header with settings and content, look for import/export button on top menu of header page.
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
- 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
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
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
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.
A container is the box for a single row that contains one or many elements.
- 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 %)
You can use any in 8 below elements to build any header you want easily.
Drag and drop to add or change the position of any element on your header. To configure any element, just click on it.
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.
- 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
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.
With text layout, the menu appears as vertical menu list with dropdown sub-menus.
Here are all settings for menu with text 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.
The menu appears full-screen on click with either background image or plain background color.
The menu appears on sidebar on click.
In this tab, you can change text style and size for your menus.
Move to “Submenu” tab to see settings for submenu. Here you can choose animation, as well as text style of submenu.
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.
- 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.
Edit text element is like edit a post. Here you can add media (picture, video), or change text style.
This is a text logo on your header.
- 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
This is an image logo on your header.
For image logo, you can upload and change size for your own logo.
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.
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.
- 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 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.