Kata Header Builder is a tool that allows you to create website headers in Elementor’s editing environment using the Styler. Add your favorite widgets to create your own template. The designed template will then be considered your website’s main header and will be loaded on the top.
Note: One of Kata Header Builder’s unique characteristics is that widgets are positioned next to each other rather than under. To access the header builder, please click on Header from the Kata Control Panel.
Now, you’re in Kata Header Builder. The Elementor editor will open by default, and you’ll be greeted with the Kata logo, your website menu, and one social element. On the left side, you can see Elementor widgets specific to the Kata Header Builder.
These are the widgets usually used in the website’s header. However, you can use any widgets you want in the header.
- Kata Cart
- Kata Date
- Kata Hamburger Menu
- Kata Language Switcher
- Kata Login
- Kata Logo
- Kata Menu
- Kata Search
- Kata Weather
Add your desired element to the header section and begin designing.
Header Responsive
It is obvious that the design and look of your header would need to be different for different devices since each has a different screen size. To this end, create another section under your header section but design it for small screen sizes.
Menu items are usually displayed differently in mobile devices. A toggle replaces header items so that as soon as you tap it, the whole menu will be revealed.
The Kata Menu element has an option for a responsive menu that has a default template once enabled.
This design cannot be customized currently. So if you want to have a more advanced responsive menu, you’ll need to use the Kata Hamburger Menu element.
Create a section below the main section and place the Kata logo, Kata Hamburger Menu, and other elements in it.
Now you need to design a content Elementor Template that can be displayed by tapping on the toggle. Open your WordPress menu from the admin panel and go to Templates > Add New to create a template in the form of a section.
Set your Elementor Section’s height to Fit to Screen so that it fills the full height of the user’s screen.
Now, drag a Kata Menu element and add it to your section.
Set the layout to Vertical and select the menu that you want to be displayed.
Now, it’s time to style this menu using the Styler. Go to the Style tab and open the Wrapper’s styler by clicking on the icon in front of it. Go to the Text tab in the Styler and change the text alignment to Center. This way your menu items will be in the middle.
Now, click on General and open the Styler for a menu item you want to customize.
Once you’re done, make sure to save the template, then go to the Kata Hamburger Menu element and select the template you just saved.
Implementing the Toggle Menu is done.
Now, you need to manage which section is shown when and for which size. We suggest using Display: Block for the sections related to larger header sizes using the Styler for Desktop, Laptop, and Tablet Landscape and using Display: None for mobiles, tablets, and small mobiles.
Do this for smaller sized sections only this time set Display: None for Desktop, Laptop, and Tablet Landscape and set Display: Block for the other sizes.
