How-Tos
In This Article
How to quickly align/position elements in header?
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
- 2
- Change the order of appearance
- 3
- Center the logo
To hide a search icon on mobiles, start editing this search icon and in Flex Options select Hide Element for mobiles
Go to “Cart” element and specify “1” in the Order on mobiles control to position the cart icon on the first place
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
