There are 2 ways to add a mobile header:
- via header Layouts
- in the Customizer
Creating a Mobile Header in Layouts
Layouts is a preferred way of creating a mobile header since it gives you flexibility and control over your elements. Creating a mobile header is similar to creating a standard header, except there are several features you should know about in order to use Layouts more efficiently.
Layouts Menu Shortcode
The Layouts: Menu shortcode includes an option to enable the mobile menu. Use it to transform your regular menu into a mobile menu on smaller resolutions automatically.
Hide Layout shortcodes on specific devices
In the settings of each Layout shortcode, you can find an option to hide it on a specific resolution.
You can also show/hide an entire row on a specific resolution. In the Row settings, go to the Custom Layouts tab.
Here’s the full list of available resolutions:
- Desktop – larger than 1680px
- Notebook – from 1168px to 1679px
- Tablet – from 768px to 1167px
- Mobile – lesser than 767px
In this way, you can create independent mobile headers by disabling certain rows on desktop and notebook devices, and enabling them on mobiles and tablets.
Adding a Mobile Header in the Customizer
Instead of Layouts, you can use the default mobile header in the Customizer. Enable it in the Mobile Header section in Appearance > Customize > Header.
Please note! The mobile header is visible only if you choose default header style in Appearance > Customize > Header.
This type of a mobile header lets you show/hide such elements as logo, search form, login link, and shopping cart. You can also use the Additional Info section, a text block where you can add information about your business, such as telephone number, open hours, etc.