How to Create a Custom Menu With Elementor For Free

Being a leading website builder, Elementor comes with many useful features but did you know you can Create a Custom Menu With Elementor for Free. In this article, we are going to Create & Design a Custom Navigation Menu in WordPress.

Table of Content

  1. How to Create a Custom Menu With Elementor – Step By Step 
  2. How to Add Custom CSS to Elementor Nav Menu?
  3. How to Add Custom CSS to Elementor Nav Menu?

In this quick tutorial, we will need the free version of Elementor & A free plugin. Before we get into the main topic, let us why you might want to use Elementor to create a menu in WordPress. 

Customization is the main factor for using Elementor to create a custom header or footer. If you are using the default header or footer, there is not much room for customizing the header, unless you are using a premium theme. You can also design the Off-Canvas menu using Elementor. 

How to Create a Custom Menu With Elementor – Step By Step 

By this end of the tutorial, you will be able to create a custom header or footer With Elementor. Although this tutorial is beginner-friendly, you must know how to use or work with Elementor Website Builder.

Step 1:

How to Create a Custom Menu With Elementor

First of all, Install & activate the Elementor Website Builder on your WordPress website. 

How to Create a Custom Menu With Elementor

Now Install & activate a free plugin called Elementor Header & Footer Builder. 

Step 2: 

How to Create a Custom Menu With Elementor

Go to appearance > menu > create a new menu > Give the menu a name & click on the create button.  

Note: Follow step 2 only if you don’t have a menu yet, or feel free to skip it, If you have a menu.

Also Read: Best Themes for Elementor Pro in 2021 (Free & Premium)

Step 3: 

How to Create a Custom Menu With Elementor

Once you have created the menu, go to  Elementor Header & Footer Builder under appearance. 

Click on Add New –

How to Create a Custom Menu With Elementor

Step 4: 

Give the header or footer a name. Now scroll down and find the  Elementor Header & Footer Builder options –  

Elementor Header & Footer Builder

Select the following – 

  • Type of Template: You can choose header, footer, before footer, and even a custom block.
  • Display On: You can also display the header on specific pages or the entire site.
  • User Roles: You can also decide who can see the header.

Once done, click on publish button.

Step 5: 

Elementor Header & Footer Builder

Now click on Edit With Elementor button to open the Elementor website builder.

How to Create a Custom Menu With Elementor

Now search for the “Navigation Menu” widget on the Elementor widgets section. Drag and insert it into the column area.

Step 6: 

Mega Menu In WordPress

After adding the Elementor’s nav menu widget to the template/page.

How to Create a Custom Menu With Elementor

Choose the menu from the menu section as shown. You can further customize it by dividing the columns or adding more columns. You can also add buttons or search or logo with the help of the Elementor widget.

Custom Header With Elementor

Step 7 :

Once you have created the header or footer, it’s time to make it responsive. Click on the ” Responsive Mode” to make the menu responsive. 

Note: As mentioned earlier, you must know how to use Elementor to Create a Custom Menu With Elementor. 

Related: Essentials Addons for Elementor Review

How to Add Custom CSS to Elementor Nav Menu?

If you know a little bit of CSS, You can easily add custom CSS to your Elementor Nav Menu. Well, Elementor makes it pretty easy to add class or ID to almost every element. 

To add custom CSS follow the step given below – 

Add Custom CSS to Elementor Nav Menu
  • Go to the advanced tab on the Elementor Widget.
  • Navigate CSS ID or CSS classes (here I am using an ID with the name “header-btn”)
 Custom CSS Elementor Nav Menu

Now Write the desired CSS using Additional CSS or a plugin like Custom CSS & JS.

4 Best Mega Menu Plugins For WordPress

In case you are looking for Mega Menu Plugins for WordPress, Check out the list given below – 

1.JetMenu 

Price:  $24 per year (Single site)

Jet Menu is one of the best mega menu plugins for Elementor. It works with Elementor with any issue. Jet Menu is the perfect option for an Elementor mega menu For WordPress Users.

Notable features of JetMenu 

2. WP Mega Menu

Price: $29 per year (single site)

WP Mega Menu by Themeum also lets you create a professional-looking menu using Elementor easily. It is quite easy to use and beginner-friendly.

Notable features of WP Mega Menu

  • Shortcodes
  • Unlimited colors and styling options
  • In-menu widgets
  • Animations Effects
  •  Multiple menu badges such as (Hot, New, etc.)
  • Various skins and themes
  • Advanced feature widgets
  • Search 

3.UberMenu

Price: $25 for a single site 

UberMenu is also a good option for those who want a menu that will work on iOS and Android mobile devices without any problem. 

Notable features of UberMenu

  •  iOS and Android mobile devices
  • Notable features of UberMenu
  •  CSS3 transitions for Dropdowns 
  • Static or dynamic content
  • Add post grid, images, descriptions, etc. to the menu.
  • Custom HTML

Also Read:6 Best Free Elementor Plugins for WordPress

4. Max Mega Menu

Price: Free / $29 (Single Site)

Max Mega Menu By megamenu.com  is a Mega menu plugin that is based on the standard WordPress menus system. It is also one of those lightweight mega menu plugins. It is probably the best free mega menu plugin for WordPress. 

Notable features of Max Mega Menu

  • Off-canvas menu
  • Custom item styling
  • Configurable roles restrictions
  • Grid layout builder
  • lightweight & responsive 

5. WordPress Mega Menu – QuadMenu

Price: Free / $15 to $60

Another great free mega menu, QuadMenu is a flexible mega menu plugin and it also offers a drag and drop builder. The free version of QuadMenu comes with many features.

  • Unlimited menu themes
  • Animations for dropdowns
  •  Off-canvas, Vertical, horizontal, and sticky menus 
  • Customizable breakpoints
  • Support for widgets
  • Show or hide items based on screen size

Which Mega Menu Plugins Should I Use?

  • The Best Premium Mega Menu Plugin is either JetMenu or WP Mega Menu.
  • For Beginner, I would suggest you try QuadMenu or WP Mega Menu
  • The Best Free Mega Menu Plugin:  QuadMenu

Conclusion: Now you know how to Create a Custom Menu With Elementor for Free. Make sure to design the mega menu properly or you might face problems while making it responsive.

Images Credit : Pexels , WordPress

Leave a Comment