How to Create a Navigation Menu with Elementor (Step-by-step guide)

How to Create a Navigation Menu with Elementor (Step-by-step guide)

Undeniably, menus are one of the critical elements of a website, regardless of the type and industry it is representing. With this element, apart from the presentation, you must keep the navigation and user experience in mind as well. 

When visiting a site for the first time, almost 38% of customers look at the layout or navigational links of the page. Thus, if the menu is hard to find, visitors will not take a second before jumping off. 

Moreover, featuring a menu that looks dull and boring can be an easy distraction for your visitors, which will only increase your bounce rate. Keeping this in mind, while creating an eye-catching and attractive menu is extremely essential, it could be a cumbersome task. 

If you think you are stuck in the loophole of crafting a navigation menu with Elementor, this post is meant to help you out. Let’s find out more here. 

Creating Navigation Menu in WordPress

Jotted down below are some easy-to-follow steps to create a navigation menu in WordPress. 

  • Open your WordPress dashboard
  • On the left side, hover your cursor on Appearance and click Menus
Appearance > Menus

Once here, you can either create a new menu or choose from the pre-built ones. If you choose to go with the former option, follow these steps:

  • Click create a new menu option
Create new menu
  • Now, give a name to the menu and add items from the left side of the page
Menu name and menu items
  • Now, you can select from categories, custom links, posts, and pages
  • Choose the items according to the performance
  • You can also create multi-level submenus by dragging the menu items to the left and right
  • Click Create Menu button
Create menu button

And you are done with creating a navigational menu. You can also create multiple menus by simply clicking the “create a new menu” link above the Menu Structure.

Best Addons for Your WordPress: CyberChimps REA Plugin

If you have been in search of some of the best addons for your WordPress, try out the REA plugin by CyberChimps. Designed by an excellent team of developers, this plugin offers more than 30 widgets and 100+ ready-site templates. Let’s dive deeper and find out more about this plugin through these features:

  • An Array of Widgets Available

Whether you want to add a testimonial slider to your site or showcase a pricing table, there is an array of widgets you can access with this plugin. Each of the widgets has been categorized accordingly. Some of the top categories you can find here are content, form, SEO, posts, marketing, WooCommerce, and creativity. 

  • Inbuilt Theme Builder

The plugin comes with a Responsive Elementor theme builder addon. Through this feature, you can effortlessly create and edit the primary elements of your entire website. It could be pages, posts, menus, footers, headers, 404 pages, global archives, and much more.

  • More than 100 Pre-Built Templates

If you are going to design a WordPress website from scratch, this addon plugin could be a life-saver. It backs up more than 100 ready-to-use Elementor templates. The process of using these templates is nothing more than a cakewalk. All you will have to do is choose one template, import the demo, add content as per your preference, and simply launch the website. 

  • Improves the Performance of your Website

This one is a lightweight widget and addon that you can use with ease. Through this plugin, you can enable or disable specific sections or elements right from the panel. This way, you can enhance the performance of your website to a great extent.

How to Add a Navigation Menu on Elementor Using REA: Step-By-Step Guide

Nav Menu Widget

Before getting down to the guide, make sure that you install the REA plugin to access this widget. This REA Nav Menu widget lets you create and customize menus on your WordPress website. Here is the step-by-step guide to do so:

  1. Drag and Drop the Widget

Search for “REA Nav Menu” and drag and drop the widget onto your header.

Drag and drop REA Nav Menu
  1. Select the Menu

After inserting the widget onto the header, click on the edit button. Under Content > Layout > Menu, click on the dropdown to choose the menu that you want to display on the website. As previously discussed, you can create multiple menus under appearance > menus; from your WordPress dashboard.

Select menu
  1.  Customization Options in the Widget

If you would like to customize the items in your menu, the below-mentioned fields will help you out:

  • Content
REA Nav Menu - Content

Under the content section, you can find a variety of features and functionalities, such as:

Layout– Menu
– Layout
– Align
– Pointer
– Animation
– Submenu Indicator
Mobile Dropdown– Breakpoint
– Full Width
– Align
– Toggle Button
– Toggle Align
  • Style
REA Nav Menu - Style

Under the style section, the features and functionalities that you can find are: 

Main Menu– Typography
– Text Color
– Pointer Color
– Pointer Width
– Horizontal Padding
– Vertical Padding
– Space Between
Dropdown– Text Color
– Background Color
– Typography
– Border Type
– Border Width
– Border Color
– Border Radius
– Box Shadow
– Horizontal Padding
– Vertical Padding
– Divider
– Distance 
Toggle Button– Color
– Background Color
– Size
– Border Width
– Border Radius

In Conclusion

Now that you have understood how to create a navigation menu with Elementor, it’s time you create an attractive-looking one for your site. REA plugin is loaded with a variety of customization options that allow you to effortlessly create fully-functional menus without a single line of code. 

So, without further delays, go ahead with this plugin and let your website visitors browse through the web pages easily.

Leave a Reply

Your email address will not be published.