How to create a Mobile Menu

No results found. Try again with different words?

Search must be at least 3 characters.

How to create a Mobile Menu

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.

mobile menu

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.

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

Related Docs

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