Astra Header Builder provides a dedicated option to design a mobile menu. These options are available with the Astra theme, while advanced configuration options are available with Astra Pro.
Editing Mobile Header
Visit the Customizer settings.
Step 1 – Click on the Header Builder to start editing.
Step 2 – Switch to Mobile View in the Customizer.
Step 3 – You will observe a separate dedicated box for a mobile header in the visual header builder. The off-Canvas section allows you to configure header items inside the toggle button. Usually, you would have your logo and toggle button in your Primary header here, but there are no limits to where you can place elements in your mobile header.
Step 4 – In the Off Canvas section, click on the plus sign to add the off-canvas menu, and you can configure the menu from there.
Step 5 – You can click on the gear icon to set mobile header type, color, and other options.
You can choose the following options for header type –
- Flyout
- Full-Screen
- Dropdown
If you need to edit the Toggle button, click on it and make the changes.
You can enable Transparent Header for mobile from customizer under Header Builder > Header Types. Choose to display it on mobile and configure it.