Max Mega Menu for Elementor – Create Free Elementor Mega Menus

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)
3nVVQ MSzcQsIJjuaNssOXjwWBqGQl9T5PL5qiX73xDNOcG985 U6KA7OKnox9H3keyz5dlNfIrttmvP538k27kqJUB8u xXiMm06DF4Ce61iJwH7 QXkakn YRZMd2eYqfu1m3J

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

asD2c50TwZOnlRqB9FSc9wE taGtQff6HP7otXdpvo149VZBKbz9dSEaWOlrm k va6SpVm88fjz5 M4anYD0NSY7yLW9h7a xaRS za1HvVb60ivCWre2oB 38cnGquUCgktdg1
  1. 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)

th7rpOOO4sb9EUbvzvUMEKFN94Kh0 12ECftgpZa8kzpsNOHJX vry8

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)

Max Mega Menu for Elementor

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)

1I tmfeGlMvQ0Q6YgpB45 qT2 1 jgMldjud SAw

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)

ibgcLF cWDQMOl5GhHD RXNikX7ZZ77RFUgO2B t0Rw2E7He6KWJC4yPtcXsjeMNsB964q


  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)

wHo95fSeXPHsk wgUe3Qwx4k9DSAKRdDz1MolDk5YRfb CRSCWhVr4nJESCYCNZY QuZf5n6gg4Dtq46Y6eNtHJmW111kqy1QtYu5kHxCi9Ucl989pLSWLAeLmXZC 5HDkO qiek

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)

7BhffOqIRsB1 L7XEBVlwX4MjI4cY3n0x W83E0XeQT0hrKVJyPLXB2AhC1dajnhSVYo7CfPE8uZqXjlLPx1In3KYBEFoc4VM2iilzZJB9eVh2UIrmX29nkA9eKWLZ5Rz9frLGZ

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)

AVbuyimDRmnxigDdeqQ3igHfX6WXjWniWEcJWZiR5rykqrscR3n3s6Q8We37SMduVHnanHHmyqT 6QSjx3MywXBhxeh29 EM ivFW5SMjRS9jd9E02aA2FWgXjY1pjz6GclEFcSY

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)

dr8YGLLGq56bQ52ziIonDJl mI33dDUQOgz6YxfHpeduzMK9k BOUrY5o9 WMlU2DYLZPLaJl2 2CEyQ QehSqzmuPcqPU2 6AtS66vMLzaPY8uv7nsPj gaV8J

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)

NuoPLsR106asdOAzboKxb5ZlI32mnI3A l zzrxhcm8ioNy0kVAvuv mFaDsQHgqVCdSQei8GW5j41vsnm5H WDbWUmD DK5UJJVSyc UwZeQVSh6Tdo6miQbsIJcf122 4D9LPV

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)

HF2RaL kxw 8 k3h4jSTircwL3RYNKrvSEP3FdjBUWhS 4WW0QBNCx7IZ5J2M8HP QJJT2W6XjCM8cef2gEymWXEct7UYLCyo1dK4LcVxqjaNDF5ySOu6psroKeM

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)

wOphFzrf5t54aNywEmlZf5Ni Z2QAg83VZX4wRe4ixOvFKatOMG3u3gJpo3yvrlEpPpydx8rmOU6jVeirnFsUH mW9TGedIFuJvJbtFT0jBuoAnBSzoWLNM42gOOh8rZ6ibtE3H

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)

Q0zB0T8o7 MKLVZSzpttHwpc4ypLiJojWRiEHTG pKUf2WD mIgHzi hoHjIcww2XdtHNq2jP1k7PBpJim0XI8gksqd6HN7UN26tdlyMz4IiwZbdbo9IcvIOX2S4 MhF7u mkOth

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)

BBHdQhEJvDCJxcZyj8xO5vowAYqjyatkSb9oiOhxplkbkZjCRZpJTesSM w3w qjzwvlMvcf MdEhCJVJueWstEn c0LgdtZ7OBvfAOw1 4Wb9mY73Ec7BXryRV3cQLoRO9pwNNg

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)

WTvbF6vKnlYPDEQ1Jgfs56C8 5y YtXuBqHlsq2z9UI AP3dwCa9m5jYScAeuvUtafcp7m0CW2jG f5dfz1LDeOKQjYq6X4MJ4tFivGW J4S7DJCLwnv5z 8iZkRgq qaaZW5CJ

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.

xUZW5l2KkjTVu2NpEOqQNAj arm74R60olYWYDdXwZLsVIezljms0i3foT4OFxN0JT2mOTAoyrQAolziGebDoFyGgXwliIEb

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!

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

3 thoughts on “Max Mega Menu for Elementor – Create Free Elementor Mega Menus”

  1. Avatar
    Christoph Künzle

    Hi Kwehangana,
    Cool tutorial, thank you!
    How can I switch the menu theme on runtime?
    E.g. I have a header that overlays the background image, with a menu with white fonts, and when the page is scrolled down, the header changes to a sticky one with white background and black font menu.
    I did this using the elementor nav menu, where I have two header sections, each containing a nav menu, that can be styled individually. Then I just flip the header sections on scroll.
    But with max mega menu, the menu theme is defined globally.
    So, switching the menu theme on scroll would solve the problem.
    Thanks for your help

Leave a Comment

Your email address will not be published. Required fields are marked *