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
- How to Create a Custom Menu With Elementor – Step By Step
- How to Add Custom CSS to Elementor Nav Menu?
- How to Add Custom CSS to Elementor Nav Menu?
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.
Now Install & activate a free plugin called Elementor Header & Footer Builder.
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.
Once you have created the menu, go to Elementor Header & Footer Builder under appearance.
Click on Add New –
Give the header or footer a name. Now scroll down and find the Elementor Header & Footer Builder options –
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.
Now search for the “Navigation Menu” widget on the Elementor widgets section. Drag and insert it into the column area.
After adding the Elementor’s nav menu widget to the template/page.
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.
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.
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 –
- 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”)
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 –
Price: $24 per year (Single site)
Notable features of JetMenu
- 5+ types of menu including submenu,hamburger,horizontal, vertical,etc.
- AJAX loading
- Various styling options
- Animation effects for menu
Also read: Elementor One Page Navigation: Step by Step (Easy)
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
- 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
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
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
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.