Back to contents

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 WP 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.

Mega menu structure

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 option that becomes visible on hover, positioned on the right from the item’s title.

mega-menu-option

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 option a popup appears and the Content block will be opened by default.

mega-menu-content

Toggle Mega Submenu Enabled option to Yes. Then, click Edit mega menu item content option to proceed to the Elementor editor.

NOTE! There are many more options to set the menu items, such as Icon, Badges, Misc and Vertical Menu.
  • Settings — set up a Mega Menu position (Default or Relative the menu item) and choose custom menu width.
  • Icon — simply pick up the menu icon and its color, if you want.
  • Badges — 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 Misc section, there is an opportunity to hide the navigation menu and customize the item’s padding.
  • The last category is the Vertical menu — 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.

Posts Widget

You can enrich with an 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.

Attention! 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, for example, go to WP Dashboard > Crocoblock > My Library then choose Header you want Mega Menu to be applied to and Edit it with Elementor.

Mega menu for header

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.

jetmenu-widgets

2 Step — Select and Customize a Mega Menu

Then, select a created mega menu in the Content block of the widget and choose from the massive amount of Style Settings to fully customize the appearance of the main menu and mega menu as well, for example, change the color, background, size, etc.

Menu Selection
Edit Mega Menu

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.

Mega Menu Action

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.