Elementor has no default widget or feature to create a mega menu on your WordPress site. If you want to create a mega menu on an Elementor-powered WordPress site, you can install an add-on. JetMenu is one of the add-ons that you can use to create a mega menu in Elementor.
How good is JetMenu? Read on to find the answer.
Elementor itself actually has a widget — the Nav Menu widget — that you can use to add a menu to your custom header. However, this widget has no capability to create a mega menu.
A Brief Intro About JetMenu
JetMenu is a great add-on if you want to create a mega menu in Elementor. Just like Elementor, you don’t need to touch any single line of code to create a mega menu with JetMenu. You can add and edit the content of your mega menu using the visual editor of Elementor (If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor). In addition, you can also use JetMenu to create an off-canvas menu. JetMenu adds three widgets that you can use to add a menu to your custom header:
- Mega Menu
- Vertical Mega Menu
- Hamburger Menu (you can use this widget to create an off-canvas menu)
JetMenu is a part of JetPlugins, a set of Elementor add-ons developed by Crocoblock.
Is Elementor pro required to use JetMenu?
You can use JetMenu on Elementor Free, but you need an add-on that has the capability to create a custom header since Elementor Free has no capability to create a custom header (read: Elementor Free vs Elementor Pro). JetThemeCore is one of the add-ons that you can use to create a custom header.
How to Use JetMenu to Create a Mega Menu in Elementor
Before getting started, we assume that you already know how to create a custom header in Elementor. We have a separate article that covers it in case you have no idea yet. In this article, we will go straight to adding a menu to the header. Also, make sure you have at least one existing menu on your WordPress site. Here is the example of the mega menu we created.
You can see more examples of the mega menus created using JetMenu on the official site of Crocoblock.
First off, create a new custom header with Elementor (or edit an existing one). Add the Mega Menu widget (or the Vertical Mega Menu if you want to create a vertical mega menu) to the header section. Go to the left panel and select a menu you want to add from the Select Menu dropdown menu on the Menu block under the Content tab.
You can go to the Style tab to style up your menu. You can do this later once the mega menu is created. For now, go to Appearance -> Menus on your WordPress dashboard. Select a menu to be edited. Make sure to select the menu according to the one you have set on the step above. On the Add menu items panel, open the JetMenu Location Settings block and enable the Enable JetMenu for current location option.
Hover your mouse over a menu item you want to set it as a mega menu item and click the Settings button.
On the appearing window, click the Edit Mega Menu Item Content button on the Mega Content tab. This will open the Elementor editor where you can add the mega menu content to the mega menu item. Make sure enable the Use Mega content option as well.
As the Elementor editor opens, you can start adding the content. You can add any element/widget you like just like when you are creating a page or template with Elementor. For instance, for the “Blog” menu item, you can add the Posts widget to display your articles.
Or, you can display your products on the “Shop” menu item. Start by adding a new section by clicking the plus button. Or, if you want to add the content from a template, you can simply click the folder icon.
Before adding any widget to the section, you can set the background first. By default, your section has a transparent background so setting the background is crucial to make your content visible. To set the background, open the settings panel by clicking the left arrow icon on the bottom-left corner. Go to the Style tab once the settings panel opens.
Select the background type you like and set the color on the color selector (or click the image selector if you want to use an image as background).
You can continue adding the content by dragging the widgets you want to the canvas area. Again, you can read this post if you are new to Elementor. Once done adding the content, click the UPDATE button followed by the X icon on the top-right corner.
Set the position of the mega menu by clicking the dropdown menu on Mega menu position. If you want your mega menu to be on the center area, set the position to Default and leave the width to default as well (the default width is empty). If you want to have a custom width, simply set the width value. You can also set the position to Relative the menu item.
If you want to add an icon to your mega menu item, open the Item Icon tab and select the icon you like. Also set the color of the icon.
You can also set a badge to your menu item if you want. In this context, a badge is an additional text above the menu item.
To add a badge, simply open the Item Badge tab and type the badge you want. Also set the color and the background color.
If you use the Vertical Mega Menu widget, you can also open the Vertical Menu Widget tab to set the position and the width of the vertical mega menu.
Click the SAVE button to apply all of the changes you made and click the X icon on the bottom-left corner to close the window.
Repeat the steps above to add mega menu content on other menu items. Once done, click the Save Menu button.
Note: You can’t add mega menu content on sub-menu items.
Styling up the Menu
Once you are done adding the mega menu content to the menu items you want, you can switch back to the custom header to style up the menu. Select the Mega Menu widget to edit it and open the Style tab on the left panel. There 10 styling option blocks you can open:
1. Desktop Container
You can open this block to set the background of the menu container on the desktop devices. You can set the alignment of the menu items, border radius of the menu container, the padding of the menu container, and the box shadow of the menu container.
2. Deskop Menu Items
You can open this block to customize the desktop menu items. Several things you can set are the typography (font family, font size, font style), text color, background color, border radius, padding, and so on. You can use set a different color for each state (normal, hover, and active).
There is also an option to set the color of the icons, but this setting option doesn’t work if you have set the icon color when you were adding the mega menu content.
3. Desktop Sub Menu
You can open this block to customize the items of the sub-menu. Some settings you can apply are the width the sub-menu (the dropdown), the typography, text color, background color, border radius, padding, margin, icon color, and so on.
You can both customize the panel of the simple menu and the mega menu. To customize the mega menu panel, simply open the MEGA PANEL tab.
4. Desktop Icon Size
You can open this block to set the size of the menu item icon on the desktop devices. You can also set the margin, horizontal position, and vertical position.
5. Desktop Item Badge
You can open this block to set the text color of the desktop item badge, typography, background color, border radius, padding, and margin.
6. Desktop Item Dropdown
You can open this block to customize the dropdown menu item on the desktop devices. You can set the font size, margin, horizontal position, and vertical position.
7. Mobile Toggle
You can open this block to customize the mobile toggle (the hamburger icon on desktop devices). You can can the toggle color, toggle size, background color, padding, and border radius.
8. Mobile Container
You can open this block to customize the menu container on the mobile devices. You can set things like the container width, container background color, the size of the close icon, the color of the close icon, padding, border radius, and box shadow.
9. Mobile Items
You can open this block to customize the content on menu items on the mobile devices. Some settings you can apply are size of menu icons, the typography of the menu items, the text color of the menu items, the typography of the item badge, the text color of the item badge, sub-menu button, and so on.
You can play around on this settings block to customize the mobile menu of your website.
10. Mobile Advanced
You can open this block to set the loader color and cover color of the mobile menu on the mobile devices.
While you can style up your menu via Elementor editor, JetMenu also comes with a settings panel where you can set the global settings of your menu. You can go to JetPlugins -> JetMenu Settings on the left sidebar of the WordPress dashboard to open the JetMenu settings panel. No need to make any setting on this panel if you have styled up your menu in the Elementor editor. You just need to make a setting if you want to set a global setting.
The global settings will be used as the default settings of the Mega Menu and Vertical Mega Menu widgets. For instance, if you set the color of the main menu container to red like the one below,
the Mega Menu widget will have a red main menu container every time you add it to the header.
Global settings are great for time efficiency as it allows you to save the settings as a preset. However, since the panel is not powered by Elementor, you can’t preview every change you made in real-time.
Global settings will be overridden every time you make a new change when customizing the menu in the Elementor editor.
Final Thought – JetMenu Review
JetMenu is a great add-on if you want to create a mega menu on your Elementor-powered WordPress site. It makes use of the Elementor visual editor to allow you to add the mega menu content. You can add any Elementor widget when creating the mega content. For instance, you can add the Products widget to display the top-selling products on your online store. Or, you can add the Posts widget to display the featured articles on your blog or online magazine.
The ability to customize the menu on mobile devices is another great point worth-mentioning. There are 4 settings blocks dedicated to customizing the mobile menu of your website.
All components on the mobile menu can be customized via those settings blocks. In addition to creating mega menu, you can also use JetMenu to effortlessly create an off-canvas menu thanks to the availability of the Hamburger Menu widget.
JetMenu itself is a premium Elementor add-on. You can get it at $43 per year. There is also an option to get it in a bundle in case you need other add-ons from Crocoblock. One-time payment option is available.
Crocoblock offers a 30-day money-back guarantee so you can get your money back if you think JetMenu doesn’t work the way you expected.
Update: JetMenu now supports Gutenberg.