fbpx
create mega menu with elementor - featured image

Create Mega Menu with Elementor using the Nav Menu

Do you use Elementor and want to add a mega menu to your site? You’ve come to the right place! In this guide, we’ll show you how to create a mega menu with Elementor using the Nav Menu.

Mega menus are very popular nowadays. These rich menus help you improve navigation on your site making it easy for your users to browse your content and find what they’re looking for. These user-friendly menus are especially useful for online businesses and eCommerce stores that have many categories and products.

If that’s your case, we recommend you add a mega menu to your site. As they have many options and links, mega menus seem difficult to create. However, with Elementor, you can add and manage all the content of your mega menu in only a few minutes. That’s why in this guide, we’ll show you how to create mega menus with Elementor and Elementor’s Nav Menu.

Why create a Mega Menu with Elementor?

We’ve previously covered the needs for using a mega menu for your WordPress website and its many advantages such as convenience, comfort, and site navigation. But why use Elementor in particular to add a mega menu?

Elementor is one of the most popular drag and drop page builders out there. The amount of ease you have with Elementor in terms of site customization and element creation is unmatched. Additionally, its deep level of integration with WooCommerce allows you to create the perfect mega menu for your shop. You can easily integrate WooCommerce pages, shop items, cart pages, and much more smoothly to provide your users with the best shopping experience.

Additionally, Elementor offers a huge number of options to enable a mega menu so you can choose the one that best fits your needs. For this guide, we’ll use the Nav Menu. So, let’s have a look at the basic steps you need to follow to create a mega menu with Elementor and how you can enable the Nav menu.

How to create a mega menu with Elementor using Nav Menu

To create a Mega Menu with Elementor, we recommend you use Nav Menu. It’s Elementor’s Mega Menu solution that’s available for free. But before you can use it, you need to set up a simple menu design that you can integrate with the Nav Menu.

Create a menu

Let’s start with the process of creating the right menu for your website. First, open your WordPress Admin Dashboard and go to Appearance > Menus.

create mega menu with elementor - appearance menus

On the menu creation screen, you can either customize your current menu or create a new one. Let’s create a new menu by pressing Create a New Menu.

create mega menu with elementor - create a new menu

Then, give your Mega Menu a name and click on the Create Menu button.

You might be asked for a menu location, but since we’ll be using our Elementor Mega menu, don’t set up any menu location. You can also remove any menu from your menu locations from the Menu locations tab.

create mega menu with elementor - menu location

Now, to add Pages or Posts to your Mega Menu, simply select the pages or posts you want to add to your mega menu and click Add To Menu. You can also add your WooCommerce products to the menu as well as specific product categories, tags, and even WooCommerce endpoints like the Account page and others.

create mega menu with elementor - add to menu

For now, let’s create a simple Shop mega menu with only WooCommerce Products and crucial WooCommerce pages.

We’ve added all the right items, but the menu isn’t ready just yet, so let’s customize it by dragging and dropping some items. Let’s add a custom URL menu item that links the Blog menu with the most popular blog posts. On top of that, let’s add a Dropdown list under the Shop page with all the Shop products.

create mega menu with elementor - blogs item

Go ahead and drag in all the WooCommerce Products under the Product item and all the blog pages under the Blog item to make an efficient drop-down menu. You can choose the order of the blogs/products by simply dragging and dropping them.

create mega menu with elementor - customize menu

Now that we’ve set up our primary menu let’s go ahead and save it by clicking on the Save menu button.

create mega menu with elementor - save menu

Setting up Nav Menu for Elementor

Now that we’ve added the menu, it’s time to start building the Mega menu in Elementor. To do this, let’s create a new template. Go to your WordPress Admin Dashboard > Templates > Add New Template. Then select the Template type as Header, give it a name and click Create Template.

create mega menu with elementor - templates elementor header
Then, press the Add New Section button on the Drag Widget here area. Here, you’ll need to Select Your Structure. There are several options to choose from depending on the menu you want to build but for now, we’ll use a 1×1 structure.

create mega menu with elementor - add new section

Now, use the left sidebar and click on the grid icon on the sidebar’s top right. This will take you to the widget selection screen. Then, use the search bar to search for Nav Menu and drag this widget to your newly created widget area.

create mega menu with elementor - add new nav menu

Now, under layout, you’ll have to choose which menu to use for your Elementor Mega Menu. Use the menu option and select the menu you’ve just created for the widget. And that should set your menu. However, there’s a lot more you can do with Elementor and the Nav Menu.

create mega menu with elementor - choose menu

So, let’s go ahead and add a few more animations and features to your Mega menu.

Customizing your Mega Menu with Elementor

Clicking on the Mega Menu on Elementor will instantly take you to its customization options on the left sidebar. Let’s go ahead and change some options.

For one, you can choose the alignment of the menu items to better fit your website. You can also add a customized pointer on the menu item that will be shown when users hover over the menu items. Additionally, there are several options that you can select and even include a custom animation for each pointer to add a bit of charm to your Elementor mega menu.

create mega menu with elementor - menu animations

You can also choose different icons for the sub-menu indicators.

Optimizing your Mega Menu for mobile with Elementor

Considering how many users browse the Internet from their mobile phones, it’s a good idea to customize additional options to optimize your mega menu for mobile viewing. This includes adding a hamburger button to open your Mega menu, changing menu alignments as well as the hamburger button.

Once you’re done customizing your Elementor Mega Menu, click Publish, and you’ll have to provide a Display Condition. This option lets you choose where you want to display your newly created template and all its designs. Since we want this mega menu to show up all over our site, we’ll select the option to display it on the entire website.

So, press Add Condition and choose the Entire site option under Include. Then, click Save and Close, and your template should be displayed all over your site. Of course, with Elementor, you can choose to hide or show the mega menu on specific pages. All you need to do is add the condition to exclude or include the pages.

For example, to add more options, click on the Save options button next to the Publish button and press Display conditions. You can add another condition to exclude the menu on another specific page, and the template will hide accordingly.

That’s just the tip of the iceberg. There are many other things you can do with Elementor to improve your mega menu. So now, go ahead and play around with your Mega menu to make the most of it on your site.

Final Words

All in all, mega menus are excellent tools to improve navigation on your website. They allow you to display many categories and products in an organized way to help users browse your content.

To add a mega menu to your site, you can use a plugin or follow our guide and create a Mega Menu with Elementor. If you decide to create it yourself, Elementor’s built-in Nav Mega Menu option is certainly the best one to help you get the job done efficiently. The plugin is simple, doesn’t take a lot of time to set up and customize, and it’s very easy to use.

So, to summarize the process, let’s note down the things you need to do to set up your Elementor mega menu:

  • Create and customize your WordPress Menu
  • Create a Header Template and add your Mega Menu widget to it
  • Customize your Mega menu widget
  • Add display conditions to your Header template and publish it

And that should set up your mega menu. Nav Menu isn’t the only option for your Mega menu widget. There are other menu plugins/widgets that might fit your needs better. While Nav Menu is simple, minimal, and very easy to use, it lacks more advanced features.

If you’re just starting with mega menus, Nav Menu is an excellent choice. However, if you want more advanced functionalities, we recommend QuadMenu. It adds all the features you get with Nav Menu with even more customization options. Everything from specific mobile-related options to full color and background customization and additional elements and icons to add to your website. Similarly, other plugins like Clever Mega menu offer even more options to include shop items and make your website more accompanying.

For more Elementor tools, you can check out our article on the best Elementor Plugins for WordPress.

Have you created your Elementor Mega menu using the Nav Menu? Which other methods do you use? Let us know in the comments section below!

Hello!

Click one of our representatives below to chat on Telegram or send us an email to [email protected]

How can I help you?