In this tutorial, I’m going to show you 3 ways how to create mega menus in WordPress with Astra Pro theme step by step.

With the Astra Pro mega menu feature, you’re also able to use Elementor templates to create mega menus, and you won’t need to install another WordPress mega menu plugin to achieve the functionality.

Astra also perfectly integrates with Elementor page builder so you can easily use the Astra theme to create mega menus whilst using Elementor.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Create Mega Menus in WordPress with Astra Theme

What You’ll Need to Create Mega Menus

Astra theme; you should have installed and activated the free Astra theme.

Astra Pro Plugin; you can purchase and download Astra Pro extension from Astra’s website. After downloading the Astra Pro plugin, go to your WordPress dashboard under Plugins, install and activate it.

Elementor page builder plugin: we’ll use the elementor free version.

Let’s get started

With your Astra Pro activated, go to Menus on your dashboard (01:10). When you click on Menus, you’ll get a window with the available menus.

On the dashboard > menus, press the create new menu option. Give your menu a name, mine is Astra Mega, and click create menu (01:54), in the next window, check the Primary Menu option to allocate the menu to the primary menu, then click the Save Menu button.

After creating your menu, the next step is to add menu items to it. 

For the menu items, you can use custom links, pages, posts, in this case, we’re going to use custom links. Select the pages; Home, About, Publications, Blog, and Get Fit (which is a contact page), then click the Add to Menu button (02:42)

When the menu items are added, you can re-arrange them to the order you prefer, by dragging them, you can also rename them to your preference for example here I’ll rename the Get Fit page to Contact. When you’re done click the Save Menu button on the right. (03:07)

Also Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus

Creating a Mega Menu with Astra Pro

The first mega menu I’m going to create is the one under the About Me page. It has 3 columns and each column has 3 menu items (03:19)

To create this mega menu we’re going to create custom links, which may be linking to any other section of your website, or even out of your website.

Get back to your dashboard >menus > add menu items > custom links, here is where we’re going to add our items; on the URL option just put a hashtag (#), then on Link text put Column A, then click the Add to Menu button (04:44) go ahead and repeat the same steps for Columns B and C.

After adding all 3 columns drag them under the About Me item (05:07). 

Go back to the Add Menu Items area and repeat the same process: 

Under Link put a hashtag, then under Link text put column 1, and press the Add to Menu button (repeat this 3 times), then do the same for columns 2 and 3 (05:49)

After adding all 3 columns, 3 times, drag them to Columns A, B, and C, that is; drag all Column 1s to Column A, Columns 2s to Column B, and Column 3s to Column C (06:51)

Now we’re done creating the menu with its sub-items. Press the Save Menu button. Then at the top of your dashboard go to the Visit Site option and CMD/CTRL-click to open the site in a new tab, or simply right-click on Vist Site and say open in a new tab (07:11). Then go preview your menu under About Me (07:25).

Enabling the Mega Menu using Astra Pro

The menu we’ve just created is using the native menu generated by Astra, and now we’re going to make it a mega menu.

To do this:

Back to your Menus, click on the About Me item and click on Astra Menu Settings (07:39)

Under the Astra Menu settings, enable the mega menu (07:47), then click the Save button. On the Mega Menu Width option, you can also specify the width of your mega menu, for example, you can choose to make it content or container width, or full.

If you set it to Content, the menu will run from where your content on your site begins to where it ends.

If you set it to Menu Container Width it will run from where the menu starts to where it ends.

Then if you select Full your menu will appear on your whole window.

In this case, select the Menu Container Width option, then click the Save button. Click the Save Menu button too, back in the Menus area, then reload your page to preview. It should now look like this (09:12)

Styling Your Mega Menu with Astra Menu Options

Back to your Astra Menu Settings under About Me, scroll down to Override colors for this mega menu option, set the text color to purple, hover color to black, and column divider to purple (10:13). You can use any other color you prefer, and when you’re done click Save and go on to Save Menu, then reload your preview page (10:34).

Now, go back to your Menus and select Column A then click on the Astra Menu Settings option (10:43). Here, enable the Make this menu as column heading option (10:49)

After you enable your menu to be a heading, you can now scroll down to the Highlight label color and choose a color for it, then Save.

Repeat the above steps for Column B and Column C:

Menus > Column B/C > Astra Menu Settings > Make this menu as column heading > Highlight label color > Save.

After this, Save Menu, reload the page, and preview (12:28)

To add the column dividers:

Get back to your Menus and for each of the columns (A, B, and C), select each and go to the Astra Menu Settings, choose a color under the column heading separator color option. When you’re done, save and reload. (13:53)

Create A Full Width Astra Mega Menu Using Elementor Template

The next menu I’ll show you how to create is the one under the Publications section (14:25). It’s going to be a full-width menu with a number of elements.

Back in your Menus area, go to Publications and first add a custom link item; under Custom Links add a hashtag on the URL option, then on link text add ‘content’ (14:57). Click Add to Menu, then drag the content item to just below Publications.

Next, go to Publications and select Astra Mega Menu Settings, enable the Mega Menu option (15:16), under Mega Menu Width select Full, then save.

Now select the Subitem, that’s Content, then go to Astra Menu Settings, leave the first options on default (unchecked). Scroll down to Content Source; here you have to select where to get your content, in this case, choose Template (16:07)

For this template we’re going to use Elementor; one of the leading page builders, there’s a free and pro version, here we’re just going to use the free version.

To install Elementor, go to your Plugins area on your dashboard. Under plugins click the Add New button, then search for Elementor then install and activate it (16:47)

After you install and activate Elementor, go to your dashboard menu and open your Template (17:21)

In the Templates area, click to Add New template (17:32).

Choose the template type to be Section, give it a name (Astra demo in my case), then click create a template (17:46). 

This will take you straight to the Elementor Editor where you can add a couple of stuff like sections, widgets, images, etc.

However, in this case, we’re not going to create from scratch, we’re going to use a template, so select the folder icon (18:16). This opens up the Elementor Templates Library where you can just choose a template/ block of your choice and just click Insert. 

When the template loads you can delete the sections you don’t need  (select the section, right-click and delete) (18:45)

Select the individual columns/inner sections and under Advanced in the Edit area on the left, remove the Padding by setting it to 0 (20:03)

Select the main section, go to Advanced, and under Padding, give it 30px on the Top and 30px at the bottom (21:01)

When you’re done, click the Publish button at the bottom left. Then go back to your WordPress dashboard and click the Save Menu item. 

Back to the Publications option in the Menus area, go to the Astra Menu Settings, under content source select template then on the Template option choose the template you just created, mine is ‘Astra demo’, then click the Save button (22:17)

Note: Under Publications > Astra Menu Settings, make sure the Mega Menu Width is set to Full.

After setting all this up, click the Save Menu button. Then reload the preview page (22:54)

To make the menu full width:

First, go back to the sub-item (content) and then open the Astra Menu Settings, under Menu Label, check the Hide Menu Label /Description option (23:21), then save.

Go to Publications and open Astra Menu Settings, set Background Color to black, then save, then save the menu as well. Reload the preview page (24:14)

You can also add other elements like images, videos, or anything else you want.

Creating Astra Content Based Mega Menu

Our last mega menu is the one under Blog, it has 3 submenu items.

Go back to WordPress dashboard, under Menus > Add menu items. Go to the Categories option this time and choose Conferences, Coaching, and Digital Spaces then click the Add to Menu button (24:59).

You can choose any other items from the Categories that you prefer.

When they’re added, drag them and position them below Blog. 

Click on Astra Menu Settings under Blog, enable the Mega Menu option, then under Mega Menu Width, set it to Content (25:30)

Under Background Color, choose a color (purple in my case). Then down on the override colors menu, set text color to white, set text/link on hover to yellow, and the column divider to white (26:25). If you’re satisfied with your color choices, click the save button.

With this menu, you don’t have to make any changes to your submenu items. So just click the save menu button, then go to the preview (26:49)

In Conclusion

That’s how you can create mega menus using the Astra Pro theme and Elementor. Hope this will be helpful to you in your web projects.

For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.