Back to contents

How to create a mega menu with several columns using JetMenu plugin for Elementor

This tutorial uncovers the way of creating a so-named multi-columned mega menu with several columns using the JetMenu plugin for Elementor.

JetMenu plugin is an easy-to-use tool which perfectly suits for customizing a web site’s menu and building a mega menu with Elementor.

This obviously means you can create a mega menu with any structure you need, including any number of columns, inner sections, and, surely, any widgets you might need.
From this tutorial, we will learn how to create a mega menu with several columns using JetMenu plugin for Elementor.

Let’s get started!

Primary settings in WP Dashboard

Step 1 – Go to WP Dashboard > Appearance > Menus and create a new menu with the help of the link in the top of the page.

Step 2 – In the Menus > Edit Menus > Menu structure block you will see the Menu Name field where you should give your menu a name and then click Create Menu button. After that, the page will reload and you will see your menu in the dropdown menu, where you can choose which one to change.

Step 3 – Now, in the Menu structure block, you should select the Display location. We checked the Main one to display the menu for the first column as the main one, typically in the header. For the second column, we checked the Social menu location. If you want to showcase the menu in the footer section, choose the Footer location.
Then, click Save Menu and the page will be updated.

Display location option

If you have the main and single menu, you can enable the Automatically add new top-level pages to this menu option and the new pages will be added to this menu automatically.

Step 4 – Ensure, that in the dropdown menu you have the right menu selected. In the Menus > Edit Menus > Add menu items > JetMenu Settings block you should enable JetMenu for the current menu location option. Then, click the Save button.

Menu Structure

Step 5 – Let’s create and add menu items. Proceed to the Menus > Edit Menus > Add menu items > Custom Links block, enter the URL address field and Link text one to set a link and give a name to the tabs on the menu. Don’t forget to click Add to Menu button. You should also click the Save Menu button to save the changes.

JetMenu for the current menu location option

Note, that if you want to create a mega menu with several columns, you should create several menus. So, repeat the actions to create some more menus with the necessary items.

Step 6 – After clicking the bottom, you will see your tabs in the Menu structure block. In this block, you will also see the name of the menu. Make sure, this is the appropriate one.

Step 7 – In the Menu structure block, you can change the position of items just dragging and dropping them to the right place.
Alternatively, you can click on the tab and change the previous settings or move the item.

Step 8 – In the Page > JetMenu Settings tab you can also check the pages to be displayed in a certain item.

Step 9 – While hovering on the items you will see the JetMenu button. You should click it.

Step 10 – Above all, here you will have some general settings which you can change, for instance, the Vertical / Mega menu position, icon, badge, navigation label (show or hide it). Save all the changes and then in the Content tab you should enable the Mega Submenu and click Edit Mega Menu Item Content button.

Edit Mega Menu Item Content

Settings in Elementor editor

Step 1 – So, you are redirected to Elementor editor. Firstly, you should add the section with several columns.

Two columns with Mega Menu plugins and templates

Step 2 – After that, you should drop the Mega Menu widget to each column. Choose the needed template from the dropdown menu in the Content > Menu tab. You should perform it for each column.

Step 3 – Customize the view of the menu up to your needs.

Hover the tab in the menu

That’s it!
Now you know how to to create a mega menu with several columns with the help of JetMenu plugin.