Stand with Ukraine. Fight for freedom and democracy

Back to contents

Creating a mega menu within a default header with JetMenu for Elementor

Take a look at this useful tutorial if you want to create a mega menu within a default header with JetMenu plugin.

Display the menu of your website in a stylish, eye-catching manner using JetMenu plugin. You will be able to expand your opportunities in creating a mega menu within a default header in any WP theme. Customize the mega menu with drop-down sections and add relevant content in them easily and quickly.

Enabling and creating a mega menu

Step 1 – First, open Appearance > Menus block in the WP Dashboard, select a certain menu to edit and enable JetMenu for current location option in the JetMenu Settings tab. Don’t forget to click the Save button.

Enabling JetMenu settings

Step 2 – After that, we are able to use JetMenu functionality for each item of the menu.

Menu Structure

Step 3 – Let’s click JetMenu option next to the item of the menu and the window for creating a mega menu will appear. There are six blocks, such as Content, Settings, Icon, Badges, Misc and Vertical Menu, where we can apply varied settings to the menu.

Content block

In the Content block we should enable Mega Submenu option and push Edit Mega Menu item content button to enrich the item with an appropriate content via Elementor. We can use various widgets for displaying different kinds of information.

Edit Mega Menu item content button

The Settings block gives us access to customizing the mega menu position.

Settings block

We select a certain icon from the dropdown list and color it as we need in the Icon block.

Icon block

We add a colorful badge to the menu item in the Badges block.

Badges block

In the Misc block, we set to hide item navigation label and adjust a custom padding for this item.

Misc block

In the Vertical Menu block, the settings for JetMenu Vertical Menu widget are presented, so in our case, we don’t need to go there unless we’re customizing a vertical mega menu

Vertical Menu block

When all the needed adjustments are set, we click the Save button.

We use JetMenu functionality for customizing all menu items in the same way as we have shown above.

Step 4 – It is necessary to save the updated menu by clicking the Save Menu button.

Step 5 – Then we proceed to JetMenu tab in the WP Dashboard to explore different options for the mega menu.

There are some settings blocks, such as General, Styles, Main Menu Styles, Sub Menu Styles, Mobile Menu, Advanced, and Presets Manager, which provide a lot of useful settings to adjust the menu as we wish. We switch between these blocks and style up the main menu, sub menu, mobile menu, icon, badges, drop-down arrows.

General settings

We finished to design the mega menu and now we can view it within a default header on the website without actually placing it to the header template built with Elementor. Now you know how to add a mega menu built with Elementor to the default theme’s header.