WordPress comes with a menu manager to create and manage a navigation menu on your website. You can add a navigation menu whether on the header, footer, or even the sidebar of your website. In most WordPress themes, you can only add a basic, simple navigation menu. There is no option to create a mega menu. If your WordPress theme offers no feature to create a mega menu, you can install a plugin to create one. One of the plugins you can install is JetMenu.

JetMenu allows you to create either a vertical or a horizontal mega menu. You can add content like blog posts, contact form, map, image, WooCommerce products, and so on to your mega menu. JetMenu itself is technically an Elementor add-on. You need to have Elementor installed and activated on your WordPress to use it.

How to create a mega menu with JetMenu

Before getting started, make sure you have installed and activated both Elementor and JetMenu on your WordPress site. You can use JetMenu on Elementor Free, but you need an extra add-on to create a custom header to be able to create a mega menu with JetEngine. In this example, we use Elementor Pro. You can download JetMenu on its official website.

JetMenu adds the following widgets to Elementor:

• Mega Menu
• Vertical Mega Menu
• Hamburger Menu

You can use one of those widgets when creating a custom header on your WordPress theme using Elementor. If you are new to Elementor, you can read this article to create a custom header template. In this example, we will create a mega menu from an existing custom header template.

On your WordPress dashboard, go to Templates -> Theme Builder.

Click the Header tab on the left panel. Select an existing header template you want to edit and click the Edit link.

You will be redirected to the Elementor editor after clicking the Edit link above. Add the Mega Menu widget to the header section (or the Vertical Mega Menu widget if you want to a vertical mega menu). You can find these widgets on the JetElements block.

Go to the left panel and select a menu you want to use from the dropdown menu on the General block under the Content tab. If you want to use a different menu for mobile devices, you can select the dropdown menu on the Select Menu for Mobile option.

You can style up the mega menu later. For now, go to Appearance -> Menus to edit the content of the mega menu. Before start adding the content, make sure to enable JetMenu on the menu you want to turn into a mega menu.

Hover your mouse over a menu item and click the JetMenu button.

Enable the Mega submenu enabled option and click the Edit Mega Menu Item Content button. This will open the Elementor editor where you can add content to the mega menu item.

As the Elementor editor opens, you can add the content by dragging the widgets you want from the left panel to the canvas area. If you are completely new to Elementor, you can read this guide to learn how to Elementor.

Once done adding and editing the content, click the UPDATE button on the bottom side on the left panel followed by the X icon on the top-right corner to close the Elementor editor.

You can add other elements to the menu item such as badge and icon. Click the Save button to apply the changes you made followed by the X icon to close the window.

Click the Save Menu button on the menu manager to make sure once again that the changes have been applied.

You can repeat the steps above on other menu items to add the mega menu content. Once done, switch back to your custom header template to style up the menu.

Styling up the menu

To style up the menu, you can switch back to the header template and click the Mega Menu widget to turn into an editing mode. Then, go to the Style tab. There are 10 settings blocks you can open:

You can play around with each settings block to style up your menu. One thing, if you want to change the menu icon color, you can do so on the menu manager (Appearance -> Menus) on the mega menu creator window.

On the Desktop Item Icon settings block, you can only set the icon size, margin, and horizontal/vertical position. There is no option to change the color. Once done styling up the menu, you can click the UPDATE button on the bottom side to apply the styling you applied.