The more complex a WordPress site come with the need for a more comprehensive menu. One of the popular options to make the menu more comprehensive is the mega menu. Mega menus are big expandable menus where everything is visible at once. As we know, most popular websites use that feature on their websites, which means mega menus are very useful.
Until this article was made, Elementor doesn’t support creating the mega menus by default, so you’ll need the help of third-party addons. There are lots of addons for Elementor on the WordPress plugin directory to create a mega menu, but some addons aren’t flexible. In this tutorial, we will show you how to create a mega menu in Elementor with JetMenu by Crocoblock. JetMenu will make the processing of creating mega menus much easier.
How to Create Mega Menu in Elementor using JetMenu
There are three plugins that you need to install before we start the tutorial, as below:
- Elementor
- Elementor Pro (Elementor Pro is needed when you want to create a custom header template using Theme Builder)
- JetMenu (You can purchase JetMenu for single plugin or you can buy a bundle of Crocoblock plugins)
Step 1: Set Up an Existing WordPress Menu
Now, it’s time to build the actual menu. Before we go any further to the plugin’s settings and start applying any changes, we want you to make sure that at least you have a menu on your WordPress site. If you have no menu yet, simply create one. You can read this article to learn how to create a menu in WordPress.
To set up your menu for mega menu, login to the WordPress dashboard and go to Appearance -> Menus and you can see your existing menu appearing. In this example, we use our existing menu “Mega Menu Example”. The menu has to be set as the main/ primary. On Menu Settings, set the Display location to the Main Menu or Primary Menu. Next, save the menu by clicking on the Save Menu button.
Step 2: Setup the JetMenu Settings
To open the JetMenu settings, login to your dashboard and go to Crocoblock > JetPlugins Settings > JetMenu > General Settings.
On top of the General Settings tab, you will find some options, Preset Manager, Export Options, Import Options, and Reset Options. Under those options, you can see four options such as SVG Image Upload Status, Template Content Cache, Revamp Menu, and Cache menu CSS.
The only option that we need to change here is the Revamp Menu. When this option it’s enabled, all settings made on the JetMenu dashboard will apply to the menus from the WordPress locations only. So, if you want to use your old menu with these settings, keep this option turned off. However, in this tutorial we want to build a new menu from scratch like we’re going to be doing in this tutorial, switch the toggle to ON.
There are two more options on JetMenu settings, Desktop Menu and Mobile Render. You can open those options and play around with those settings with your creativity. But in this tutorial, we won’t change anything.
Step 3: Enable JetMenu and Set the Mega Menu Item
We are going to enable JetMenu to continue the process of creating the mega menu. On your WordPress dashboard, go to Appearance -> Menus. Next, open the JetMenu Location Settings block and switch the Enable JetMenu for current location toggle under the Primary Menu.
Next, hover over a menu item that you want it to trigger your mega menu, then the Settings button will appear on the right of the menu item. In this example, we select two menu items as triggers for the mega menu, there are “ARTICLES” and “INFO”. Click the Settings “button and you will see the popup. In the popup, you will see some settings. In this tutorial, we configure only for one setting, that is enable the mega content. So, switch the toggle to the right on the Use Mega content option. Don’t forget to click the Save button to save the changes.
.
Step 3: Design the Mega Menu in Elementor
Next, we’re going to launch the Elementor editor, hit the Edit Mega content button and the Elementor editor will open in a window.
Now, you can design the mega menu with your creativity. First, we’re going to design the first menu item “ARTICLES”. In this example, we start to create a section with two columns. You can pick any widget that you want from the widget panel. Here, we will add the Vertical Mega Menu widget. Type the Vertical Mega Menu on the search box and then drag & drop it into the canvas area (first column).
We applied some changes in the block setting, as below:
Content:
- Menu: Articles (You can select the existing menu that was you created before)., You need to create a new menu if you don’t have one and then go back here to continue the tutorial.
Style
- Main Menu: Set the Main Menu Width to 300
Next, we continue to the second column. In this example, we will add the Posts widget which. Select the Posts widget from the menu bar then drag and drop it into the canvas area (second column).
On the settings block, we applied some settings as below:
Content -> General
- Posts Numbers: 6
- Columns: 2
- Equal Columns Height: YES
- Show Posts Excerpt: NO
- Show Post Terms: NO
- Show Posts Meta: NO
Content > Carousel
- Enable Carousel: YES
- Pause On Hover: YES
Once you’re done editing, update it by clicking on the UPDATE button. Close the window of the Elementor editor by clicking on the (X). When you’re back to the menu item setting, don’t forget to click the Save button.
Next, we move to the second menu item “INFO”. Click the Edit Mega content button. Once you entered the Elementor editor window, add a section with two columns. In the first column, we will add the Google Maps widget. Select the Google Maps widget on the menu bar then drag and drop it into the canvas area (first column). On the Content tab, you will find some options to edit your Maps Location, Zoom, and Height. So, edit the settings as your preference.
Next, we’re going to the second column. In this column, we will add the Form widget, which is one of the Elementor Pro built-in widgets. Find that widget then drag and drop it into the canvas area (second column).
Once you’re done with your editing, update it by clicking on the UPDATE button. Close the window of the Elementor editor by clicking on the (X). When you’re back to the menu item setting, don’t forget to click the Save button.
Step 4: Create Header Template Using Theme Builder by Elementor Pro
Now, it’s time to apply the mega menu that you just created as the header template using Theme Builder by Elementor Pro.
On your dashboard, go to Templates -> Theme Builder. This will take you to a window that contains plenty of options to build the template. Click the Header tab then create a new header template by clicking on the Add New button. You will see the library of header presets. In this example, we will create a header from the scratch. Close the library window and you will enter the Elementor editor.
Once you entered the Elementor editor, create a new section with two columns. The first column we’ll be using for the site logo and the second column for the mega menu that we’ve just created. Select the Site Logo on the widget panel then drag and drop it into the canvas area (first column). Next, select the Mega Menu widget on widget panel and drag and drop it into the canvas area (second column).
Next, it’s time to apply some changes to the header. You can play around with the settings and styling it with your creativity. If you don’t have any idea, you can see our settings below:
Site Logo
On the Style tab, set the Height to 100
Mega Menu
On the Style tab, edit the Items Typography and set the Size to 20
Well, it’s done. Before you publish your header template, don’t forget to rename your header template by clicking on the header settings button then you can rename it. Once you publish your header template, your new mega menu will be applied to your site.
The Bottom Line
At the time of writing (March 31, 2022), Elementor has no default feature to create a mega menu. The only way to create a mega menu is by using a third-party add-on. JetMenu is an Elementor add-on from Crocoblock designed specifically to create a mega on an Elementor-powered WordPress. You create the mega menu using the Elementor editor, which offer limitless design options. You can add any content you to your mega menu. From image, maps, WooCommerce products, blog posts, and so on.
