JetMenu: How to Create a Mega Menu in Elementor

Keep reading to learn more about creating a mega menu with JetMenu plugin from Jet Plugins family for brilliant workflow in Elementor editor.

JetMenu is a first-class plugin that allows creating a mega menu with Elementor. Add relevant content to a menu using appropriate widgets, and style it up according to the needs.

Creating a Mega Menu

1 Step— Select or Create Mega Menu

Before starting the work, make sure that the JetMenu plugin is currently installed and active on the website.

Select the location on your menu (Main, Footer, Social) and Menu Settings. After that, in the JetMenu Settings block, toggle the Enable JetMenu for the current location option and click the “Save” button.

Go to the WordPress Dashboard and proceed to the Appearance > Menus tab. Here you can select one of the existing menus for editing or create a new one. Apply it for one or several of its items.

2 Step— Choose an Item

Now, to enable the Mega Menu itself, choose the item to which you want to add a mega menu. Hover over it and click the “JetMenu” button that becomes visible on the hover, positioned on the right from the item’s title.

If you want to set Mega Menus to several, or even to all menu items, just repeat the described actions for each of them.

3 Step— Click on the Jet Menu option

Right after you click on the “JetMenu” button a popup appears and the Content block will be opened by default.

Toggle the Mega Submenu Enabled option to Yes, and click the “Save” button. Then, click the “Edit Mega Menu Item Content” button to proceed to the Elementor editor.

NOTE! There are many more options to set the menu items, such as Icon, Badges, and Vertical Menu.

• Mega Content — set up a Mega Menu position (Default or Relative the menu item) and choose custom menu width.
• Item Icon — simply pick up the menu icon and its color, if you want.
• Item Badge — with this setting it is possible to add a badge to the items, for example Trending or Sell and choose the color for them.
• In the Advanced, there is an opportunity to hide the navigation menu and customize the item’s padding.
• The last category is the Vertical Menu Widget — here set the width for Vertical Mega Menu Widget.

4 Step— Choose a Widget

Use any widgets to build a mega menu. You can use headings, sliders, portfolios, post layouts, videos, etc. Style them up according to your creative vision. In the example, we choose Posts Widget.

You can enrich with appropriate content each menu item in the same way. When all menu items are customized, click the “Save Menu” button and open in Elementor the page, where you want to display the mega menu.

Note. Make sure to save the menu as mentioned above, otherwise, the changes will not be saved.

Displaying Mega Menu in Header Template

Well, now we can see our previous actions on the website. When all menu items are customized and saved, you can add the Mega Menu to the Header. Go to WordPress Dashboard > Crocoblock > Theme Builder, choose the Header you want Mega Menu to be applied to, and press the “Edit it with Elementor” button.

1 Step— Add a Mega Menu Widget in the Elementor Panel

NOTE! In the Elementor panel, there are two widgets Vertical Mega Menu and Mega Menu.

So, choose one of the widgets and drag it to a certain place on the page.

2 Step— Select and Customize a Mega Menu

Select a created mega menu in the Select Menu for Desktop drop-down menu of the General section of the Content menu tab and customize the appearance of the main menu in the Style settings tab. For example, change the color, background, size, etc.

3 Step— Click Update and look at the Result

When everything is customized, click the “Update” button below and enjoy the effective view of the mega menu on the website.

Enrich the pages with attractive, eye-catching mega menus and draw visitors’ attention to your website using JetMenu functionality.

You will find a detailed guide on this topic here.