No results found. Try again with different words?

Search must be at least 3 characters.

How to Create a Mobile Menu

A mobile menu is a special type of menu designed specifically for small screens like smartphones and tablets. This is the hamburger icon that readers can click on and use to navigate different sections of your website.

It is important to ensure that your website delivers a consistent user experience on any device.

Astra Header Builder provides a dedicated option to design a mobile menu.

Here’s your comprehensive guide to building a mobile menu with the Astra theme, which allows your website visitors to effortlessly navigate your site on their smartphones.

Creating a Mobile Menu

To create a mobile menu in Astra, you can follow these steps:

Log in to your WordPress dashboard and navigate to Appearance > Customize.

Within the Customizer, find the section labeled Header Builder.

Switch to Mobile View in the Customizer: You will observe a separate dedicated box for a mobile view 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.

Click on the + icon to add a mobile menu.

Select the Off-Canvas Menu option to add a mobile menu.

A new option named Off Canvas Menu will be visible in the side menu. Access this option to customize your mobile menu settings.

You will find some options in the General section including the option to enable Item Divider. This adds a line between each menu item, separating them for a better look.

You will find all the color and appearance options in the Design tab.

Once satisfied, click the Publish button to make your changes live on your website.

After publishing, test the mobile menu on different devices to ensure it displays correctly and functions properly on mobile devices.

By following these steps, you can easily create a mobile menu in Astra and optimize your website for mobile users.

Important Note:

Please note that installing a third-party plugin may hamper your Website Design. We strongly recommend taking a backup of your website before installing the plugin. Here is an article that will guide you through the process of taking a quick backup of your website.
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