How to Add Elementor Menu Items in WordPress

Do you want to add a menu to your Elementor site? Then you’ve come to the right place! In this tutorial guide, we will be showing you how to create an Elementor menu, set up, and customize the navigation menu on your website.

For any type of website, custom menu items are a must-have. They make navigating easier and help people to find the information they need in only a few clicks.

Many website owners place menus in the page header to appear on every page of their site. It’s easy to add a menu in Elementor, especially if you follow our following tips and tricks 😉

This article will teach you how to use the ElementsKit nav menu widget in Elementor. A one-of-a-kind menu can be created as well as customized in this following guide!

What is an Elementor Mega Menu WordPress?

Adding up menus in websites has become increasingly popular in recent years. This rich nav menu can assist you in improving site navigation by allowing users to easily browse your material and discover what they’re looking for.

You can use pages, posts, categories, and URLs as menu items in the default WordPress navigation menu, which is stylized by your theme.

This would be one of the most important elements of your site for making the most of your online presence. And the menu is the first element that you should consider adding to your WordPress site.

Here are two reasons why you might need an ElementsKit – Nav Menu widget:

• You’d like to make a gigantic as well as customized menu layout.
• You need an advanced featured plugin with an all-in-one solution for your website.

Using ElementsKit all in one add-on for Elementor widgets and powerful customization features, you can create a content-rich menu with our brand-new mega menu WordPress plugin.

🔔 Do you know?
You don’t have as much control over the header or footer as you’d want when using a WordPress theme or page builder.

Want to know more? Don’t forget to go through our latest blog on How to Create & Customize Header Footer – Elementor Page Builder

What Elementor’s Mega Menu by ElementsKit has to offer:

Like any other WordPress Elementor menu extension, ElementsKit also opens up a slew of possibilities for ‘hacking’ into your normal WordPress menu.

To be more specific, the plugin will assist you in the following aspects:

• Customize the menu with tags, color, hover effect, and icons.
• Change the appearance of your top-level and submenu menus.
• Create both vertical and horizontal menus.
• Choose your desired header layout from the ElementsKit library. 
• Add animation effects to make your submenu appear.
• Add in just one click by dragging and dropping the nav menu widget.
• Works perfectly fine with eCommerce platforms as well (e.g. WooCommerce)
• Build content in Elementor page builder.
• Use any element widgets you like.
• 100% responsive.
• Off-canvas menu style in tablet view.
• Show builder content or simple lists as a submenu in tablet view.

And of course, the best part is that the ElementsKit Nav menu is available for both free and premium versions. So even if you don’t purchase the paid subscriptions, you would still experience this amazing Elementor menu feature on your site.

How to create Menu Items in Elementor

Let’s take a look at some real-world instances and go over our WordPress big menu lesson. Now you’re about to go abroad to create your WordPress mega menu, header, and adding up its contents.

Create a Menu

To create an Elementor menu, you need to do is Turn On the mega menu option from the ElementsKit startup Modules page and after turning it on, click on the Save Changes button.

Creating an elementor menu requires a few simple steps. Just go to your WordPress dashboard then click on Menus. After that, you’ll see a section named Menu structure. Then input your Menu Name or menu header and click on Create Menu.

Now Expand Custom Links and put your URL as well as Link Text, then just click on Add to Menu.

📝Quick Note
You can add, remove or edit as many mega menu items as you want by repeating the same method.

It’s time to add your menu items in Elementor through ElementsKit. But before that, you need to tick ✅ the enable the menu for the mega menu content section, underneath the Menu Name section. 

Then you’ll see a Mega Menu tag on your Link Text. After clicking on the Mega Menu tag a popup will open.

To enable the Mega Menu option you need to click the enable EDIT MEGA MENU CONTENT button and save. You’re all set! 

🧐 More Info on Elementor Menu
Don’t forget to visit our blog on How to Create a Mega Menu with Elementor and ElementsKit

Import a Menu (Vertical Mega Menu)

To create a vertical menu, first, you need to turn on the vertical menu widget. Then click on save changes.

Then click on Templates at the left side of your dashboard. After just clicking on Import Templates.

Now you have to select choose file from your device. Then just click on Import Now. And you’ll see all your imported data at once.

Furthermore, to create a vertical menu with your data you need to go to Appearance then click on Menus. You can also follow create a menu from above. For more details, you can visit our documentation site on the vertical menu.

Customizing the Menu 

It’s time to customize your content and to do that you need to click on the EDIT MEGA MENU CONTENT button. Right after clicking on the button, you will see that an Elementor menu style screen has popped up. 

All you need to do is click on the ElementsKit icon and select which predefined header you want to insert into your website. 

Right after clicking on the ElementsKit widget button, it will take you to its widget library. In which, you will get tons of pre-made pages, templates, and sections. But to create a mega menu section you need to click on the Sections

To create and customize your menu items on Elementor. You need to select the Mega Menu items layout and start customizing to your heart’s content!

Here you will find 3 parts (Layout, Style, and Advanced) of customizing your Elementor menu through ElementsKit:

Layout:
In this section, you will see multiple options for editing an Elementor menu layout and structure. You have total control over how your mega menu should be presented.

Now with the ElementsKit mega menu widget, you can customize your Content Width, either you can make it a full-screen menu or customize any size you prefer to want by sliding Right or Left. Column Gaps between your mega menu can also be customized the way you like.

With the ElementsKit Elementor menu, you can edit the height of your menu items. It also has multiple options to edit the Vertical Align, Overflow, HTML tags that can be changed according to your demand.

Style:
With ElementsKit mega menu style options, you can change the entire menu look. To be more specific you can change or edit the Background, Background Overlay, Border, Shape Divider, and of course Typography.

Elementor mega menu widget by ElementsKit is a lifesaver. It has a range of menu-style elements that will assist you in making the best out of your menu items. 

Advanced:
Our menu-style advanced options for your WordPress menu are something you’ve always been looking for. Yes, ElementsKit Elementor mega menu options will also help you access and edit the entire advanced sections too. 

In which you can create a brand new menu layout. ElementsKit has more advanced alternatives like adding up effects, sticky, motion effects, hover customization, and many more which will improve your editorial experience even better and will make your mega menu smarter. 

Setting Up Nav Menu for Elementor

The last and the most important part is to sync a mega menu you need to create a header on your Elementor website. 

Now we will show you how to create an Elementor custom header template. Well, there is another good news for you with the ElementsKit nav menu widget, you can create the nav menu layout by just clicking on our pre-built WordPress menu layout options. 

Let’s get started! 

First of all, you need to go to ElementsKit on your WordPress dashboard then click on the header footer, to activate the nav menu widget on your website. 

Then click on add new mentioned just right after templates. 

After clicking on the add new button a Template Settings will pop up, which is the final part of integrating a mega menu in your website.

Here in this section, you need to give your nav menu a name called the header title. You can also change the conditions of the header and click on activation (if you’re ready and happy with your mega menu items.)

In the final part, don’t forget to click on the edit with elementor button just right before the save changes button. 

Now we will show you 2 ways of how you can add your mega menu through the nav menu widget by ElementsKit.

Method One: 

To add a nav menu widget to your website the first method you can do after clicking that edit with elementor button, all you need to do is click on the ElementsKit widget icon then go to sections and select a header style whichever you prefer. 

After that, you will see your Header title which you added from your WordPress dashboard will appear on the select menu section. And just by clicking on the header title, you will see that all your mega menu items are visible.

Method Two:

You can also embed the nav menu widget through the drag-drop option and also add up different elements around it too (e.g. images, videos, other sections, etc.)

All you have to do is select any type of section (i have selected three sections for this example). The search what widgets you would prefer to add in from your Elementor dashboard.

Here in this example, we have dragged an image, a nav menu, and a video. You can add as many sections and widgets as you like. 

Then again the same method can be used to activate your nav menu: on the select menu section, you will see your Header title which you added from your WordPress dashboard will appear. And just by clicking on the header title, you will see all your mega menu items are inserted. 

Now you know that using the nav menu widget is super simple and you’re all set to rock ‘n roll! Do keep in mind that you’re also allowed to create an off-canvas menu in ElementsKit as well. 

🛠 Additional Info
To know more about the off-canvas menu in ElementsKit, don’t forget to check out our latest video on building an off-canvas menu using ElementsKit

Final Thoughts

Mega menus are wonderful tools for improving website navigation. They allow you to organize a large number of categories and goods to make it easier for users to browse your content.

Creating Mega Menu with ElementsKit add-on for Elementor is always there to give you the best support at no price. If you’re adding it by yourself, then the ElementsKit add-on’s built-in Nav Mega Menu option can be a start for you.

ElementsKit is straightforward, takes little time to set up and tweak, is also simple to use. However, we hope this article was helpful enough to give an overview of the entire aspect of the mega menu.

Please leave a comment below if you have any queries regarding Mega Menu, Nav Menu, or its functionalities.

If you liked this article, you will surely find some more helpful tips and blogs by joining our WPmet community follow us on Facebook/Twitter. Lastly, please don’t forget to subscribe to our channel on YouTube for useful tutorials.