Nav Menu Module [Create a Mega Menu]

The Nav Menu Addon enables you to add and create Mega Menus. Mega Menus are a type of expandable menus where different choices are displayed.
If you own a website with a lot of options and lower-level subpages, then this is the perfect option to display these at a glance.

Astra provides stunning features to design Mega Menu functionality with Nav Menu addon.

This is a premium feature available with the Astra Pro plugin. To use these addons, you need to have the Astra theme installed along with the Astra Pro plugin on your website.

If you want to learn more on how that’s done here’s a walk through video made by WPBuilders.

Activate the Addon

Here are the steps to activate the addon and explore the premium settings – 

Step 1 – Make sure you have the Astra Pro plugin installed and activated. 

Step 2 – Activate the add on from the WordPress Dashboard > Appearance > Astra Options > Nav Menu

Step 3 – Visit the Menus section (Appearance > Menu > Astra Menu Settings ) to edit the Nav Menu settings.

Create the Mega Menu

If you want to create a Mega Menu, you need to enable the Mega Menu functionalities for the top-level menu item whose child menu items you’d like to turn into a Mega Menu. 

Follow these steps to do just that:

Step 1 – From the WordPress dashboard navigate to Appearance > Menus.

Step 2 – Select the menu where  you want to add a mega menu. From the selected menu click on the top-level/parent menu.

Step 3 – Click on the “Astra Menu Settings” button.

  • Mega Menu
    • Tick the checkbox for the Enable mega menu option. This will enable the mega menu options for all submenus of the parent menu. It provides options for the top-level/parent menu. You can set a Mega Menu width to content, menu container or full.
  • Background Color / Image
    • Background Color/ Image will be set to the mega menu box for the parent menu. You can adjust the background image with settings like Background Repeat, Background Size, and Background Position.
  • Override Colors for this mega menu?
    • You can set colors for the menu items present in the mega menu box for the parent menu. Available options are Text/Link Color, Text/Link Hover Color, Column Divider Color.
  • Highlight Labels
    • This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.

Step 4 – Clicking on the child menu you will show you the following options –

  • Mega Menu
    • Make column heading?: Choose this if you want to make the menu item navigation label as a title for the column. So that this will appear as a title and all child menu items will appear below this heading. Note: Make sure you have enabled the Mega Menu for the Parent Menu item to see this option.
  • Menu Label
    • Hide Menu Label/Description?: If you want to hide the label or description for the submenu, select this option.
    • Disable Link: This option will remove the link for a respective menu item. It will display only the title of the menu.
  • Content Source
    • You can select Content Source for the submenu. It has the option to select from Custom Text, Template or Widget. You can display custom text/HTML with the editor, or can select any custom template/widget. If you select the Custom Template option, a list of all available posts, pages, custom templates will appear. If you select the widget option, a list of all available widgets will appear.
  • Highlight Labels
    • This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.

Similarly, you will find options for all submenu and their submenu.

How to Create Columns for the Mega Menu?

Astra will automatically create a separate column for each submenu. When you tick the option to Enable Mega Menu within the Parent menu item, it will create columns depending on the number of submenu items present under it.

For Example – If you have the following menu structure:

  • Background Image
    • BUSINESS PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • AGENCY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • UTILITY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • SPECIAL PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4

It will display on the front end as –

How to Add a Template to the Mega Menu?

Edit the first child menu item of the mega menu. From the Content Source select the Template. From the template list, select the appropriate template.

Note – This is only available on the first children of the mega menu.

And here’s how it’ll look on the front end.

Note: Guideline to use templates inside Mega Menu –

We have provided Astra’s default CSS in the manner which will fallback to Menu colors for all text in the template which doesn’t have color stylings assigned from the template.

So we recommend applying styles from the template as per your design needs.

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