How to Add Navigation Menu in Elementor (Step-by-Step Guide)

How to Add Navigation Menu in Elementor

A properly configured and customized navigation menu is a must-have for any modern website. Its significance in the modern web landscape is undeniable. A properly linked and configured navigation menu can help users get their work done faster with a smooth UI experience. 

For example, let’s say you’re hosting a rental service website. By providing cars of different sizes & seat accommodations under a simple submenu. You’ve effectively reduced the time your customer has to browse through all the available vehicles to search for the car they need.

A little optimized browsing experience like this may seem insignificant, but it will leave a lasting impression on your customers, and they will return to experience this service again and again.

Additionally, having a menu that is drab and uninteresting might easily divert visitors, which will only raise your bounce rate. Given this, designing an appealing menu could be a difficult chore, even though it is really necessary.

Creating a Navigation Menu in WordPress

We’re listed down below the common method of creating nav menus. As this is WordPress, there are multiple ways on how you can create a nav menu. But we’ll be focusing our efforts on the most convenient way. 

Creating Menus & Submenus for Custom Navigation Menu

Before you start placing your navigational cues on your WordPress website. You’ll first need to create the menus & submenus you are planning to have on your website.

  • Start by logging into your WordPress Dashboard
  • From the left-hand side, click on Appearance > Menus
WordPress Dashboard Appearance menu

Once you’ve entered the menu dashboard, you can either start fresh or pick from the built-in menus. If you decide to go with the first choice, take the following actions:

  • To add a new menu item, click on the ‘’create a new menu’’ link at the top of the page.  
create a new menu button
  • Now, give the menu a name and add items from the left-side options. And select the Primary Menu (Currently set to: Top Navigation) from the bottom shown options. This will indicate that this menu has been created for the Header section.
Menu creation process
  • There are now categories, custom links, posts, and pages for you to choose from.
  • Select the items based on your preference. 
  • Additionally, by dragging the menu items to the left and right, you may make multi-level submenus.

And with that, you have finished making a navigation menu. Selecting the “Make a New Menu” link located above the menu structure. You can build several menus, & by dragging them, you may also create submenus for those menus.

Using the Best Elementor Addon Plugin to Create a Custom Nav Menu in WordPress

Since you’ve created the base structure of your WordPress nav menu. We can now use a simple nav menu widget to display your new navigational structure. 

We’ll be using the ElementsReady Elementor Addons plugin since it comes with all the necessary widgets. And tools to create and customize a navigational block for any section of a WordPress website.

The Add-ons plugin comes with Elementor widgets for creating the header section navigation menu. Using an essential WordPress nav menu widget

Not only that, the plugin comes with an array of tools that are great for creating any type of page. With page-specific functionality and appropriate customization options. With 105+ widgets, modules, and professionally crafted templates with ElementsReady is hard to beat. 

If you don’t know how to make a navigation menu in the Elementor editor screen. Just follow the steps shown below. 

How to Add a Navigation Menu on Elementor Using ElementsReady

Before we start, make sure that you have the ElementsReady plugin installed and the Elementor widgets enabled from the ElementsReady dashboard. 

ElementsReady Dashboard

Step 1: 

Hover over the ElementsReady Dashboard and click on the Header Footer menu. 

ElementsReady Dashboard Header Footer Menu

Step 2: 

From the Header Footer menu, click on the Add New button to create your own Header section. Now give your header section a title and, from the bottom Template Type drop-down, select the header option.

Now click on Save & Edit with Elementor

Step 3:

ElementsReady has multiple tools & widgets for this task. For this specific example, we’ll be utilizing the ER Menu widget

ElementsReady ER Menu Widget

Drop the widget into your Header section.

Step 4:

Now, from the left-hand side of the screen, click on the Settings options from the Content tab. From the menu option under the Settings tab, select the menu you’ve just created from the Appearance > Menus options. 

Selected the newly created menu for the Header section

Step 5: 

From the ER Menu Elementor nav menu widget’s Content tab, you have the option to add a Mobile Menu icon. Select between different layout styles, add a logo to your header section, and more. 

Header Section Showcase

Step 6:

Use this Elementor’s nav menu widget to customize the header section with various styles & effects from the Elementor Style tab. 

Elementor Style tab

From here, you can customize navigation menu with the Elemnetor customization options, such as color, typography, background, margin, padding, etc. 

When you find your new navigation menu satisfactory. Make sure to save your changes by clicking the Publish / Update button on the bottom left-hand side of the screen. 

Now head back to your website’s landing page to see the changes made with the nav menu widget.

QuomodoSoft Landing page

In Conclusion

That being said, now is the time for you to start working on an optimized nav menu for your website. And if you’re still concerned about how to use the Elementor? Hope this short guide helped you use the nav widget to create the optimal nav menus for your site.

Although many modern websites have started to remove nav menus altogether. But that is only acceptable on smaller websites with a small library of content. Content-heavy websites whether that be blogs or eCommerce websites still require nav bars.

And we highly recommend having nav bars for an optimal browsing experience for your visitors. It’s not about your visitor’s screen on time, visitor retention comes from user satisfaction. And a well-optimized navigation experience from your website can help you with that.

Let us know how it goes for you in the comment section down below. 

Get our updates, tutorials, and
amazing offers right in your inbox