Back to contents

JetMenu: How to Create a Multi-Column Mega Menu in 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 needed structure, including any number of columns, inner sections, and, surely, any widgets.
In this tutorial, we will learn how to create a mega menu with several columns using the JetMenu plugin for Elementor.

Let’s get started!

Primary settings in WP Dashboard

From this tutorial you have already known how to create a Mega Menu, here we will show how to customize it with multi-columns. First thing we want to share with – for each column we need to create a separate menu.

Well, let’s learn the process step-by-step:

1Step — WordPress Dashboard Settings

So, go to your WP > Appearance > Menus press create a new menu, select the menu to edit and name it.

2 Step — Enable JetMenu for the Current Location

In the Menu settings, at the end of this page, choose the Display Location and Enable the JetMenu, do not forget to press Save Button.

NOTE! If you have the main and single menu, it is possible to enable the Automatically add new top-level pages to this menu option and the new pages will be added to this menu automatically.
JetMenu Settings

3 Step — Add the Menu Items

Choose and add menu items you want to be displayed, like Pages, Categories, Custom links, etc. In the Menu Structure you will see the added Items, then Press Save, otherwise the changes will not be saved.

Now, in the same way, we need to create a mega menu for each column. For example, we want to add three columns in one of the Header Categories, so three more menus must be created.

4 Step — Create a New Menu for Each Column

When you ensure that all changes are saved, in the Edit Menu Section press Create a New Menu for each column and Add items you want to be displayed in them. Do not forget to give a name. Press Save Button after each action.

Menu for Columns

Add Vertical Mega Menu Widget

For columns to be displayed in the right way, we need to use the Vertical Mega Menu Widget.

Well, let’s see the final steps to set the columns for the menu.

1 Step — WordPress Dashboard Settings

In the Edit Menus, select the Main Menu location and choose the Item you want the multi-columns to be added.

2 Step — Enable a Mega Submenu for the Item

Click on the JetMenu setting that is positioned on the right from the item’s title. After that you will see a small pop up where it is possible to make, Mega Submenu Enabled, just toggle to Yes.

In the example, we choose the Service Item.

Edit Mega Menu Item

3 Step — Edit Mega Menu Item Content

To open the page in Elementor and add widgets, press Edit Mega Menu Item Content and you will be redirected to Elementor Editor.

4 Step — Add Three Sections

As we decided to create three columns, so we should have the same number of sections where we need to add the Vertical Mega Menu Widget to each. Just click “+” and choose the template with three columns.

For example, in the Services Item, we want to have such columns as Basic, Extended, and Pro.

Separate Sections

5 Step — Insert a Vertical Mega Menu Widget

The next step is to add the Vertical Mega Menu Widget in each column. In the Edit Section select menu that was created in the WordPress Menus settings.

Some detailed explanation for you to understand, we have created 3 menus, that are to be displayed by means of Vertical Mega Menu widget. So, in Elementor Edit Section choose those menus we prepared.

For instance, in the column called “Basic”, we selected the Custom Column 1 menu. For the rest two columns, we repeated the same actions.

You can add a Heading for each Column, we titled them as Basic, Extended, and Pro.

See what we get after setting all three columns:

Multi-column

6 Step — Style up the Columns

As always, all Crocoblock plugins and Widgets are developed for you to set them to your test and vision.

It is possible to change the color of the word, background color, set the Hover, in one word, customize it as you wish.

7 Step — Update and Save the Work

It is important to press Update and Save Buttons when all is set. In another case, you will lose all changes.

Well, that’s it, let’s look at the final result:

Multi - Column Sample

Now you know how to to create a mega menu with several columns with the help of JetMenu plugin.