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 it fills the whole 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 the 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 to use Display: None for mobiles, tablets, and small mobiles.
Do this for smaller sized sections as well, only this time set Display: None for Desktop, Laptop, and Tablet Landscape and set Display: Block for the other sizes.
