How To Create Mobile Header With Astra Header Builder?

Astra Header Builder provides a dedicated option to design mobile header. These options are available with the Astra theme 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

Once you switch to new Header Builder, visit customizer.

Step 1 – Edit Header Builder.

Step 2 – Switch to Tablet or Mobile View in the customizer.

Step 3 – You will observe a separate dedicated box for a mobile header in the visual header builder. Off Canvas section allows you to configure header items inside the toggle button. While visual builder on the right side lets you configure the look of the mobile header with the logo and toggle button.

Step 4 – In Off Canvas section, click on the plus sign to add header elements like primary menu, button, widgets, HTML and so on.

Step 5 – Click on the gear icon to set mobile header type, color and other options.

You can choose header type from –

  • Flyout
  • Full-Screen
  • Dropdown

Under Design tab you will find color options.

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

Step 7 – You can enable Transparent Header for mobile from customizer under Header Builder > Header Types. Choose to display it on mobile and configure.

Similarly, With Astra Pro, you get an option for Sticky Header.

Not the solution you are looking for? Check other articles, or open a support ticket.