How to create a mega menu using Elementor with JetMenu widget

Keep reading to learn more about creating a mega menu with JetMenu plugin from Jet plugins family.

JetMenu is a first-class plugin which allows creating a mega menu with Elementor page builder. With JetMenu, you can add content to a menu using any needed widgets, and style it up according to your needs.

Creating a mega menu

Step 1 — Log into WordPress Dashboard and proceed to the Appearance > Menus tab. Here you can select one of the existing menus for editing if you want to add a mega menu to one of the items that are already added to the menu you’ve got. Or you can as well create a new menu and then create a mega menu for one or several of its items.

Make sure that JetMenu plugin is currently installed and active on your site. If it’s active, you’ll see JetMenu Settings block.

Step 2 — Toggle the Enable JetMenu for current location option and click the Save button. Choose the item to which you want to add a mega menu. Hover over it and click the JetMenu option that becomes visible on hover, positioned on the right from the item’s title.

Step 3 — Right after you click JetMenu option, a popup appears. Here you can see Content block opened by default. Toggle Mega Submenu Enabled option to Yes. Then, click Edit mega menu item content option to proceed to Elementor editor.

Please, note, that when you enable Mega Menu for one of the items, all the sub items automatically won’t be shown any longer.

Step 4 — Use any widgets you need to build a mega menu. You can use headings, sliders, product grid layouts, post layouts, videos, etc. Style them up according to your creative vision. Also, make sure you’ve set the background for the mega menu’s section.

Also, you can import the ready-made JSON files from plugins/jetmenu/dummy-data folder to apply the pre-designed mega menu blocks. These are the same as shown on JetMenu plugin’s live demo.

Step 5 — In order to save a menu click the Publish button in Elementor and the Save button on the JetMenu screen. You also have to click the Save Menu button on the Menus screen.

Now feel free to open the web page where the menu is shown and hover over the item which contains the mega menu. You’ll see the mega menu instead of the ordinary submenu dropdown. Hoping you’ve enjoyed this tutorial. Keep exploring JetMenu to learn more about this plugin’s functionality!