Getting StartedTheme Options Page OptionsPost TypesElementorWPBakeryTemplates BuilderExtrasDynamic Content How To
TheGem Documentation
Header Builder
How-Tos

How-Tos


How to quickly align/position elements in header?

Example for Desktop

Let’s create following desktop header layout

1
Add elements

Add following elements to your header:

  • Logo
  • Menu
  • Search Icon
  • Cart

2
Align menu

Go to “Menu” element, open “Flex Options” and select “Right” in Desktop – Horizontal Align

3
Add paddings

Go to “Flex Options” in the elements, where you wish to add paddings and specify flex padding for desktop

Example for Mobile

Let’s adjust the mobile header for our previous example to get it looks like this

1
Hide search icon

To hide a search icon on mobiles, start editing this search icon and in  Flex Options select Hide Element for mobiles

2
Change the order of appearance

Go to “Cart” element and specify “1” in the Order on mobiles control to position the cart icon on the first place

3
Center the logo

Start editing the logo element, go to “Flex Options” and select “Center” in Mobiles – Horizontal Align. Additionally, activate Position Absolute

Alternatively, you can achieve it by:

  • Editing Menu element and setting the horizontal align to “Unset” under “Flex Options”

  • After that editing the column and setting “Space Between” in horizontal align under “Flex Options”


How to change background of the header?

Header Container

The default background color for the whole header container is controlled via  Theme Options – Menu & Header – Colors. In the field “Header Container Background Type” you can specify the type of the background type and select its value.

Header Row / Header Section

To change background color of the certain rows / sections of the header template you need to use page builder.

WPBakery

While editing your header template, go to the row settings of the row, where you wish to change the background color, and select “Design Options”. Here you can then specify the background for this row

Elementor

While editing your header template, go to the section settings of the section, where you wish to change the background color, and select “Style” tab. Here you can then specify the background for this section


How to add bottom border / bottom shadow to the header?

Border

WPBakery

While editing your header template, go to the row settings of the row, where you wish to add a border, and select “Design Options”. Here you can then specify border width and border color

Elementor

Shadow

WPBakery

While editing your header template, go to the row settings of the row, where you wish to add a shadow, and select “Design Options”. Here you can then activate shadow and adjust its settings

Elementor