What is Header Builder? Header Builder is a system of Draggable & Sortable Elements that you can insert in header(s) section, For example you can add logo in one side and add menu navigation on another side or add logo on center of header then add menu in another header row. In this post i will show you how you can create your own header via Header Builder system.
For starting go to Appearance > Customize > Header
- Settings of Site Logo
- Adding or Removing Social Icons
- Top of Header Row elements
- Header Row elements
- Bottom of Header Row elements
- Sticky Header you can make one row header sticky
- Mobile Header, you can make completely Different header for mobile and tablet devices
- Fixed Side, This option will be explained in another post
- More, You can customize Style of overall header or enable Hidden top bar section
In first steps you need to preparing some of important header settings. Go to Logo section and upload your Logo if you have else leave it empty, then back and go to Social Icons section and set your social media icons if you have.
Structure of Overall Header
The header consists of Three Rows and each row is divided into Three Columns. Each rows and columns have separate options for adding elements and Styling, You have full control over all rows and elements.
For more understanding to build a header go to Customize > Header > Header
- Header Row Type: Choose you want create new header or want to select page content as header ( At this time select Create New Row )
- Add Left: You can add element for left side of header.
- Add Center: You can add element for center side of header.
- Add Right: You can add element for right side of header.
- Styles of Header Row example you can change background color or image, padding, margin, border, radius, etc.
- Row Container Styles: Click on it and try to change background color to see changes and understand how it works.
- Row Inner Styles: Its same as row container but its width is related to site width and not window width.
- Left Styles: If you have added some elements to left side of header row, then you can change their background or border via this option.
- Center Styles: If you have added some elements to center of header row, then you can change their background or border via this option.
- Right Styles: If you have added some elements to right side of header row, then you can change their background or border via this option.
- Menu Styles: Below this section you can see Style Kits for menu navigation only on this header row and you can customize styles like colors, typography, etc.