Every theme supports at least one navigation menu. However, with Elementor you can create multiple menus and display them at different locations on your website. This is what this tutorial is all about.
Creating a navigation menu in Elementor is a pretty straightforward and fun affair. All you need is the Elementor Pro plugin since the navigation menu module isn’t available in the free version of Elementor.
Related: My in-depth Elementor Page Builder Review
You can create a navigation menu using multiple methods. If you wish to create a site-wide navigation menu, it’s recommended to use the theme builder feature in Elementor.
In the Theme Builder, you can choose between multiple header templates. Once you have selected a template, you can edit it further.
Elementor also allows you to choose where to display the header i.e. sitewide or on the archives page or single pages.
The best part is that the conditions can be stacked. So, for example, you can display the header navigation on the entire site and exclude it from the singular pages where you may wish to show a different header.
How to Display a Dropdown Menu in Elementor
You’ve seen how easy it is to create a site-wide header in Elementor using the Theme Builder feature.
Now, I will show you how to create and display a drop-down navigation menu in Elementor. You can add a navigation menu to a landing page, or a normal page or post. Anything works.
But before you do this, you should first create a navigation menu using the native WordPress menu feature that is available under the Appearance tab of your admin dashboard.
Once you’ve created one or multiple navigation menus, you can display the menu using Elementor.
On the Elementor editing screen, drag and drop the Nav Menu widget from the Pro widgets panel on the left to anywhere you wish to place the menu on the page. Usually, it would be on the top of the page. But you can get creative.
Under the Layout option, choose the navigation menu that you wish to display.
The navigation menu widget offers numerous options to customize the menu:
- Choose from among 3 layout options: horizontal, vertical, and dropdown
- Change the alignment of the menu
- Customize the menu display with animation effects
- Fully customize the mobile menu
- Numerous styling options are available
The horizontal menu is the conventional menu type whereas the dropdown menu allows you to display a compact hamburger type menu on your website.
Here is a simple drop down navigation menu that I created with Elementor 👇
The drop-down functionality depends on the child menu items added in the menu that you created earlier. I liked the fact that Elementor allows you to customize every aspect of the menu.
Wasn’t it easy to create a navigation menu using Elementor? But remember that you will need the Pro widget for this. So if you haven’t already subscribed to Elementor Pro, you should do it right now. It’s well worth it (read my Elementor review).
Exactly what I’m looking for for one of my project, thank you !
You’re welcome!
how can I drop down the header’s sub-menu from the right corner to the left side in my website?
This is a superb post. Exactly What I needed to know, I liked it and I appreciate you Trishan.