In this tutorial, I’ll show you how to use max mega menu for elementor to create a mega menu in Elementor for free. We will create a full-width mega menu, a boxed mega menu and a flyout mega menu with the help of the max mega menu plugin and elementor.

For this, you don’t even need to have Elementor Pro, though having Elementor Pro gives you more possibilities. All you need is an Elementor header and the max mega menu plugin. This menu will also be tablet and mobile friendly.

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: Max Mega Menu for Elementor Tutorial

What You’ll Need

Here are the few things you’re going to need to accomplish the task in this tutorial:

1. Max Mega Menu Plugin: to get this plugin, go to your WordPress dashboard and under Plugins search for Max Mega Menu, Install the plugin. (01:57)

After installing activate, and once it is activated you’ll see a new menu item called Mega Menu (02:05)

2. Menus: after installing the mega menu plugin you need to create your menus. For this, go to your dashboard and under Appearance click on Menus and here click to create a new menu (02:14)

I already created a menu with Home, Burgers, Desserts and Order Now items, this will be the navigation for your website.

3. Pre-made Elementor Templates: on your dashboard go to Templates, then go to Section and click add new (02:58)

In the new template window that opens choose the type of template as a section then give it a name and click the create template button.

The first section, that’s the Home section should be full width(under Content Width) and stretched, that’s in the Edit area under Layout. (03:23)

This will make it float across the whole website page.

Also, under Responsive Mode make sure the section is responsive on tablet and mobile devices.

The second template section for the Burgers area, set the Content width to “boxed”, with an inner section that you can use to add text, buttons and any other items as you want. (03:47)

Adding a Mega Menu in Elementor

To add a Mega menu into this page, go to your header template in Elementor and in the widgets section, find the Max Mega Menu widget and drag it into your header (04:10)

Note: 

1. You’ll not be able to use the Elementor Pro Nav Widget to display the Max Mega menus so all you need to do is  look for the Max Mega menu widget and drag it into your header.
2. You can create this mega menu with just the free version of Elementor, since you don’t neccesarry need Elementor Pro. You may create a free elementor header by following this tutorial.

After dragging your max mega menu widget to your header,  go to the Edit Max Mega Menu on the left and choose the Menu Location as Primary. Under the Menus section on the dashboard, you can be able to assign your menu to secondary or mobile or footer after you’ve created it. But right now it is only assigned under primary.

After selecting the menu location as primary it automatically shows up in the menu widget (05:24)

Styling the Max Mega Menu

Now you can go back to your Menus and change some basic settings:

1. Under Event: Hover on intent; this will set the menu to appear when someone hovers over a menu item.
2. Under Effect: Fade up; and you can also set how fast you want the menu to show up. You also have the option to set a different effect for mobile devices. (05:56)

When you’re done setting this up, go over to the Max Mega Menu settings to make some changes (06:15)

Go to Menu Themes option; here you can create different menu themes depending on where you want to use them on your website. The settings for your menu theme will allow you to customize the typography, colors and icons in your menu. In this case, I used the default theme and didn’t change anything.

Now go to the Menu bar option, the menu bar looks like this

Menu background is transparent. If you don’t see the transparency option you can just use the nob and slide it to transparency. (07:29)

Leave the other settings to be default.

Now, over to the Top Level Menu Items; these are the items in the Menu bar (Home, Burgers, Desserts, Order Now) and here you need to apply some styling.

Set the menu items to align to the right.

Set color to white, size 20 pixels, font family Lucida sans, transform uppercase and weight  700 Bold. (08:10)

Set the item font on hover to yellow, with weight 700 Bold

Set item background and item background on hover to transparent. You can also make any other changes in this area or you can even just leave them on default.

Under Mega Menus, you can set up the panel background color (that’s the background color that appears when someone hovers over the sub menu item), you can set it to what you want but since here you’re using a template each comes with its own color, you can just set it to transparent. 

Max Mega Menu Panel Width

The Panel Width section when set right, your Elementor mega menus will appear nice and next. So pay close attention. (09:31)  

When you create your templates with Elementor you want them to appear a certain way on your website. You either want your mega menu template to appear as full width or you want it to appear based on the content width. For this, you have to use a custom selector.

If you want your template to appear full width you can set the outer width to be body and for the inner width you can use .elementor-section-wrap (10:56)

But if you want your template to appear based on the size of the header container; you can set outer width to body and inner width to .elementor-container (10:16)

You can read more on how to use custom JQuery selectors in Max mega menu here. 

However, there’s an easier way to set your template to appear full width without using custom selectors, and that is setting the section to stretch as we did earlier when creating the template in Elementor.

Choosing What to Display in Mega Menus

How do you choose what items to display in your mega menu? To do this:

Go back to your Elementor dashboard and under Appearance select Menus. (12:17)

This takes you to the Menu Structure, here, starting with the Home menu item. When you hover over the item you’ll realize there’s a new option; Mega Menu, select it (12:27)

When you click on the mega menu, by default you won’t have any item inside it. First you have to choose a layout you want to use for the menu.

You can choose either Flyout, Grid layout or Standard layout. That’s under Sub Menu Display Mode. For the Home item, I chose a standard layout. In the next section, choose to add 1 column and then select the widget to use, that’s the Elementor Library (13:06)

When you click on the wrench (🔧) icon on Elementor Library you are able to choose the template to appear in the Home menu item. Under settings icon you can also make some customizations to your menu.(13:33)

Next is the Burgers menu item; hover over it and select Mega Menu, here choose the mega menu standard layout with one column and in the Elementor Library choose the template to display.

For the Desserts menu item; under the mega menu choose the Flyout layout menu instead. Under settings and icons, you can make some changes if you want or you can leave everything on default. Then save your menu settings.

To style the flyout menu go straight to the Mega menu and here, under Menu Themes choose the flyout menu (15:13)

Under the flyout menus:

Set the sub menu background to be transparent and the sub menu width 250 pixels, that’s the default.

Down to the menu item background color and menu item background color on hover, set the color to one of your choice.

Also, be sure to set the menu item divider to Enabled; that’s the white line under each menu item.

Max Mega Menu for Elementor Responsive Settings

Another vital section of this tutorial is the Mobile Menu (16:16)

Set the responsive breakpoint to 1024 pixels, that’s for a tablet device.

Under Toggle Bar Designer, you can move the toggle button and position it where you prefer; right, left or center. Then when you click on the toggle icon you can change its color and size.

Down under Mobile Sub Menu, you need to enable the overlay content, this is the feature that prevents other content from being pushed down when you click on the toggle button.

You also need to enable the Force Full-Width option.

You can also make other changes you want like the padding, menu background or any other, and when you’re done click the save changes button.

In Closing

And with this, the mega menu is up and running smoothly and fully responsive on all devices. For any questions or comments please use the comments section below. Don’t forget to subscribe to the newsletter and youtube channel if you haven’t!