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.
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.
Menu
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.