How To Add a Nav Menu Using Elementor in WordPress Sites

How To Add a Nav Menu Using Elementor in WordPress Sites

A navigation menu is among the most important components when creating a website. It helps visitors to navigate to different pages or content easily.

Developers usually place links to the pages that they wish users to access on the navigation menu. For instance, a website navigation menu can contain links to contact, product listing, about, and services pages. Therefore, a navigation menu can be regarded as a collection of links that are organized vertically or horizontally (usually at the top and bottom of the page) and provide website visitors with directions to internal web pages.

A nav menu has several benefits. First, it enhances the user experience by allowing visitors to easily browse through a website and find whatever they’re looking for. Second, a good nav menu can help reduce bounce rate. A bounce occurs when a visitor views only a single page and exits the website. With a nav menu, they’ll be more likely to navigate to other pages as well. Third, a nav menu can help enhance the overall web design. You can include things such as animations, typography, and other graphics on a nav menu to boost a website’s appeal.

This article will show you how to use Elementor to add a navigation menu on WordPress sites. Elementor is a popular web page builder that allows you to access and use different themes, professional templates, forms, widgets, and other add-ons. You can use Elementor to add horizontal, vertical, and drop-down nav menus to WordPress websites.

Step 1. Create the menu

Step 2. Adding the Nav menu using Elementor

Step 1. Create the menu

You’ll want to create a custom navigation menu using the default WordPress editor before adding it to a website using Elementor.

Here are the steps for creating a navigation menu.

3. Open your WordPress dashboard

For this section, we assume that you already have a WordPress account. If you don’t have an account, you can easily sign up on WordPress. In case you’re just getting started with WordPress, read our guide on how to build the best WordPress website before proceeding.

Note: To add a custom menu to a WordPress website using Elementor, you first have to create it using the default WordPress editor.

Therefore, open your WordPress dashboard as shown below.

Wordpress dashboard

2. Click Appearance, then Menus

Next, click on the Appearance item shown in the vertical menu on the WordPress dashboard.

A pop-up menu will appear showing the Themes, Customize, Widgets, Menus, Background, and WordPress Theme File Editor sections. Click on Menus to proceed.

Appeance then Menus

You should see a Menu window on your WordPress dashboard. You will create, edit, and save your navigation menu.

But before taking action, let’s understand what the different sections on the above Menu window do.

  • Add menu items. This section allows you to specify the links that should be added to the navigation menu widget. All the pages that you’ve created for your WordPress website will be shown in this add menu items component. You’ll be able to add these pages’ links by selecting your preferred pages and clicking the Add to Menu button, as we’ll demonstrate later.
  • Menu structure. In this section, you can name the menu, as well as arrange the menu items.
  • Menu settings. The setting section allows you to configure how the menu appears. For instance, you can set the menu as primary or secondary. Furthermore, you can choose whether to add web pages to your nav menu automatically or not. In this tutorial, you’ll add your web pages manually.

3. Write a menu name

To add a menu name, proceed to the menu structure (shown below) and provide your name in the provided text field. In this case, let’s use Primary as the main menu name.

Write a menu name

Next, you need to set the menu as primary because it is your main navigation component.

To do this, proceed to the Menu Settings section and ensure that the Primary menu radio button is checked.

4. Click Create Menu button

Once you have named your menu, click on the Create Menu button to create the Primary menu.

Create Menu button

5. Add categories, custom links, posts, and pages to the menu

You can add pages, posts, custom links, and different categories to your WordPress menu. However, this tutorial mainly focuses on adding pages to the menu.

Currently for the tutorial, the website has two main pages: Contact and Sustainability. The pages appear in the Most Recent section, as shown in the GIF below. If your website has numerous pages, you’ll need to click on the View All button to access all of them.

To add menu items, select your desired pages by clicking on the check box next to a page name, then press the Add to Menu button, as illustrated below.

Add categories custom links 1

The selected pages will be added to the Menu structure section.

Add categories custom links 2

WordPress also allows you to create dropdown or sub-menu items. For instance, if you wish the Sustainability item to be displayed as a dropdown menu item, you need to click and drag it a little bit to the right side, as shown below.

Add categories custom links 3

In the above example, the Sustainability item will be a child of the Contact menu item. In other words, it will be displayed on the website only when you hover over the Contact menu item. However, the tutorial does not continue using this feature since the sample website has only two pages.

6. Save the menu

You can now save the navigation menu by clicking on the Save Menu button at the bottom of the page, as illustrated below.

Save the menu

7. Publish the menu

To publish the menu, navigate to the Manage Locations section and set your menu as the Primary menu.

In case you have a secondary menu, you can use the Secondary menu option. A secondary menu helps to add more navigation to your website. This tutorial does not use a secondary menu since there are only two pages.

Publish the menu

Step 2. Adding the Nav Menu using Elementor

Note: To follow along with this section, you will need to install the Elementor WordPress plug-in. If you’re new to WordPress, follow this official guide to install Elementor. You also need Elementor Pro to access the Nav menu widget for adding a navigation bar to WordPress sites.

Now that you’ve created a navigation menu using the default WordPress editor, you can proceed to add it to the website using the Elementor editor.

Access the Elementor editor via the WordPress Dashboard. Navigate to the Pages section, hover over an Elementor page, and then click on the edit button that appears.

You’ll be directed to the default WordPress editor. Click on the Edit with Elementor button at the top of the default editor to access the Elementor page builder.

Adding the nav menu 1

Currently, the tutorial Elementor website lacks a nav menu, which means that users cannot access other internal web pages. Poor navigation on a website is among the biggest WordPress mistakes, one that you should strive to avoid.

Adding the nav menu 2

Let’s improve the above web page by adding an Elementor menu.

1. Add a header section

First, add a new header section by clicking on the plus button on the editor page and selecting the single row option, as demonstrated below.

Adding the nav menu 3

2. Add the Nav Menu widget

Search for the Nav Menu widget in the Elementor widgets window.

Adding the nav menu 4

To add the navigation menu that you created, drag and drop the Nav Menu widget to the header section.

You should see the navigation menu that you built using the default WordPress editor.

Adding the nav menu 5

3. Set the menu style

Set the menu style as horizontal or vertical using the menu layout setting in the Nav Menu widget as follows.

Adding the nav menu 5 gif

One thing to consider when creating web pages is responsiveness. A good web page should fit well on devices with different screen configurations. Fortunately, the Elementor Nav menu widget has features for ensuring that the navigation menu is responsive.

For starters, you can set a specific breakpoint for different devices. A breakpoint allows the navigation menu to adjust and fit a new screen configuration. Currently, the preset breakpoint for mobile devices is 768 pixels, while that of tablets is 1025 pixels. These are standard breakpoint values; therefore, you shouldn’t change them.

Adding the nav menu 6

Still, on responsiveness, you can hide the menu content and replace it with a hamburger icon on small screens. In this case, the menu items will be displayed when the user clicks on the hamburger icon and hidden when the close icon is clicked. This functionality ensures that the navigation menu is not overcrowded on mobile devices. On computer devices, the navigation menu will have its full width.

Adding the nav menu 7

So far, you have successfully added your navigation menu to the web page using Elementor. However, it looks pretty basic. Adding a style can improve its aesthetic appeal, intuitive appearance, and topography. Let’s add new styling options to improve the navigation menu.

Proceed to the style tab at the top of the Edit Navigation Menu window to access the customization options.

Adding the nav menu 8

In the style tab, you can change the text color, background color, hover effect, animation, horizontal and vertical padding, animation, and other attributes. To illustrate, change your menu’s text color, horizontal padding, and background.

Adding the nav menu 9

That’s it. You have successfully added a nav menu using Elementor on a WordPress site.

Once you’re done building your WordPress website, you can publish it online using the services of one of these top hosting providers.

Get a job as an Elementor Expert with Upwork

In this step-by-step tutorial, you’ve learned how to add a nav menu to WordPress websites using Elementor. There’s so much more that you could do with the Elementor plug-in, including adding dropdown menu items, incorporating animations, building secondary navigation menus, and styling the nav menu.

BecauseWordPress websites are extremely popular, knowing how to use Elementor is a valuable skill. You can easily create web pages and style them using Elementor. As a freelance Elementor expert, you can meet potential clients and sell your services on Upwork, the world’s biggest talent marketplace.

Upwork is not affiliated with and does not sponsor or endorse any of the tools or services discussed in this article. These tools and services are provided only as potential options, and each reader and company should take the time needed to adequately analyze and determine the tools or services that would best fit their specific needs and situation.


Projects related to this article:
No items found.

Author Spotlight

How To Add a Nav Menu Using Elementor in WordPress Sites
The Upwork Team

Upwork is the world’s work marketplace that connects businesses with independent talent from across the globe. We serve everyone from one-person startups to large, Fortune 100 enterprises with a powerful, trust-driven platform that enables companies and talent to work together in new ways that unlock their potential.

Get This Article as a PDF

For easy printing, reading, and sharing.

Download PDF

Latest articles

X Icon