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...

24 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!

    Thanks
    JJ

  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!
    regards!
    gaston!

  8. Hi Dave,

    I’ve noticed that any custom CSS classes and related CSS I created in the wordpress menu and customise section (related to a menu item) were overwritten when I installed Elementor Pro.

    Presumably this is to use the in-built custom CSS area, but when I copy in my CSS from the customiser into the Elementor custom CSS area it doesn’t apply it (I assume it overwrites the class I created in WordPress menus?) I can’t for the life of me work out where to create a class or id for a menu item! Any help? 🙂

    Great vids buddy!

  9. Hi Dave,
    Amazing content every time! I am stuck on making a vertical nav menu with Elementor Pro. I have created one section with two columns, nesting on top of eacother. The top column is for the site logo and the column beneath is the vertical nav menu. This is created as a header template in elelmetor. The problem is, the side header nav menu I have created doesnt cover the content area. If you could please help that would be much appreciated

  10. Hello sir, can you tell me how I can make text description appear when mouseover a text link. I mean when I go over a text link for my about page how can I make “about” appear on mouseover. I’ve been searching and can’t find anything. Thank you. I’ll upgrade to pro elementor thru you.

Leave a Comment

Tweet
Share
Share