How to Use the NEW Elementor Nav Menu Widget

How to use the new Elementor Pro Nav Menu widget. In-depth tutorial.

A while ago, I made a tutorial showing you how to build your own custom header with Elementor.

That tutorial relied on a 3rd party plugin to handle the navigation menu. It wasn’t a bad solution… but at the time, it’s all we had.

Until now, Elementor has been purely focused on building static pages and templates.

That all changed today.

The NEW Nav Menu widget is released TODAY in the new version of Elementor Pro (affiliate link).  Woooo hoooooo!!

Now you can create beautiful, responsive navigation menus, to your own 100% custom design. Pixel perfect. Powerful and incredibly flexible. No code required.

Use them wherever you like. Built right into Elementor Pro.

So in this in-depth, step-by-step tutorial, I’m going to show you how to use the new Elementor Nav Menu widget. Let’s check it out.

Let me know what you think in the comments!

Resources mentioned:

This is an affiliate link. If you buy Elementor Pro, I get a small commission. No extra cost to you. Regardless, I’d 100% recommended Elementor as the very best WordPress page builder.

Check these posts out too...

FREE Mini Video Course!

Roll Your Own Custom Layout in Under 30 Minutes

Using WordPress & Elementor

Discover how to QUICKLY & EASILY create gorgeous, 100% custom design, responsive landing pages in WordPress.

For non-coder designers. Drag-n-drop. NO code required.

With lots of expert Elementor workflow tips, tricks and best practice to save you time, make your life easier… and get better end results.

Free Elementor Video Mini-Course

21 thoughts on “How to Use the NEW Elementor Nav Menu Widget

  1. Hey, Dave. At 17:06 you talk about creating two menus to split the navigation on either side of your logo. How do you handle mobile navigation with this configuration? Thank you for the great tutorial!

  2. Dave, I know this is off-topic, but I hope you have a suggestion for me. I have a large (500+ posts and pages) WP site that really needs an update. I’m using a theme that has some shortcodes, and WPBakery visual editor on a few pages. Now that’s I’ve used Generate Press and Elementor on another site following your excellent instructions, I’d like to switch the big site over, too. My question – is there a way to copy the whole danged thing onto a subfolder, do all the changes that will be needed, and then move it back without losing the comments and such? Or would it be so much trouble that I should just leave it alone?

    • Yes you could do that Jonni. I’d suggest creating a fresh WordPress install – not sure of your setup by doing it with Local by Flywheel is really easy. Then install the All In One WP Migration plugin on both sites (old and new). Export the old site as a file, then import it into the new one. It’ll overwrite the new one completely, as if it’s now your old one. Edit away. Then when you’re ready, just reverse the process.

      Make sure to take backups! I use UpdraftPlus personally.

  3. Hey, Is it possible to use different types of nav menus in the Elementor Nav Menu Widget?
    And one thing more: which theme would you recommend for Elementor. What about Avada?
    Best regards
    N J Jørgensen

    • I don’t understand your question, sorry. What do you mean by different types of nav menus?

      Theme – I’d recommend GeneratePress, Astra or OceanWP. Avada has its own page builder and is already pretty bloated as it is, without running 2 page builders at once.

  4. Hey Dave!

    First off, I love your videos!
    Im currently running the Avada theme and it forces you to use their native header and nav menu. I found some pretty easy custom css to remove it :
    #header {
    display: none;
    but i want to replace it with the elementor nav menu i created. Do you know of a way to remove the avada header and replace it with the shortcode for my elementor nav menu?

  5. Hello Dave! Thanks for all the tutorials you’ve made. I finally made up my mind and just purchased Elementor Pro and GeneratePress. I know this will sound very elementary, but if I disable most elements from GeneratePress to design with Elementor Pro, for example, the header and footer, then will it sort of take away the benefits of GeneratePress which is super light and SEO friendly and all that? I’m sorry I really don’t understand how a theme is built, and how the look (what you create with Elementor Pro) impacts its original capabilities. Thanks for your help!

    • Hi Ai – if you build your header and footer elements with Elementor, no it won’t be as light and SEO friendly I’m afraid. But not too any great extent. If design control is important to you, by all means use Elementor. Elementor is still pretty lightweight, as far as page builders go, and I wouldn’t worry about SEO from header/footer markup too much. There are far far more important factors for SEO. 🙂

  6. Very well done video! I just started using elementor and am running into a problem.

    Is there a way to put two elements side by side in the same column? I know this seems like a simple thing but I can’t get it to work. Help would be appreciated!


  7. Hi Dave! Thank you very much for your video!
    I commented that I am creating a ONE PAGE site and the problem I have is that when I click on a link in the menu (mobile), the menu does not disappear when you slide to the section.
    From already thank you very much!

Leave a Comment