How To Create Mobile Header With Astra Header Builder

Astra Header Builder provides a dedicated option to design a mobile header. These options are available with the Astra theme out of the box, while advanced configuration options are available with Astra Pro.

Refer article here to know how to get started with Astra Header Builder.

Editing Mobile Header

To access the header settings in Astra to customize the mobile header, please follow the steps shared below:

Step 1 – Navigate to Customize > Header

Step 2 – Switch to Tablet or Mobile View by clicking the responsive device icons at the bottom of the left panel in the customizer.

After switching to the tablet or mobile view, you will observe a separate dedicated box for a mobile header in the visual header builder. This is called the Off Canvas section, and it allows you to configure header items inside the toggle button.

While the visual builder on the right side lets you configure all parts of the mobile header, you set your Primary header (middle) separately, as well as the Above and Below headers. Usually, you would have your logo and toggle button in your Primary header here, but there are actually no limits to where you can place elements in your mobile header.

Step 3 – In the Off Canvas section, click on the plus sign to add header elements like the Off-Canvas menu, button, widgets, HTML, and so on. The Off Canvas section is the one that is shown when the user clicks on the toggle button.

Step 4 – Click on the Off-Canvas label or the gear icon to set the mobile header type, color, and other options.

You can choose the following options for header type –

• Flyout
• Full-Screen
• Dropdown

Under the dropdown option, you will find two options, i.e., Icon and Link. If you select the icon option, the submenu will show after clicking the drop down arrow icons in the main menu items, and if you select the dropdown option as the link, the entire main menu item can be clicked to show the submenu items. Please refer to the video below for more information.

Under the Design tab, you will find color options.

Step 5 – If you need to edit the Toggle button, click it and start configuring.

Step 6 – You can enable Transparent Header for mobile from the Customizer under Header > Transparent Header. Choose to display it on mobile and configure it.

Similarly, with Astra Pro, you get an option for the Sticky Header. With Astra Pro, you can add more header elements and add a toggle button on desktop. By default, it is available for the mobile/tablet header, but with Astra Pro, you can also show a toggle menu for the desktop.