No results found. Try again with different words?

Search must be at least 3 characters.

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

Once you switch to the Header Builder, visit the Customizer.

Step 1 – Click on the Header Builder to start editing.

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

Switching To Mobile or Tablet Viewports

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 all parts of the mobile header – you set separately your Primary header (middle), as well as 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 4 – In the Off Canvas section, click on the plus sign to add header elements like the primary 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.

Adding Elements to Off Canvas Header

Step 5 – 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

Under the dropdown option, you will find two options i.e. Icon and Link. If you select the icon option, the submenu will show as icons and if you select the dropdown option as the link, the submenu option will show as links. Please refer to the video below for more information.

Under the Design tab, you will find color options.

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

Set Up the Toggle Button

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

Set the Transparent Header for Mobile Device

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

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form