HomeArticlesThe NEW Elementor Nav Menu Widget—In-Depth Tutorial The NEW Elementor Nav Menu Widget—In-Depth Tutorial By Juan Cameron November 7, 2019 Articles, Blog 100 Comments Tags:elementor, elementor page builder, elementor page builder tutorial, elementor page builder wordpress, Elementor Pro, Elementor Pro Menu, elementor pro tutorial, elementor pro wordpress, Elementor Wordpress, elementor wordpress tutorial, nav menu, tutorial, wordpress, wordpress tutorial Related Posts Solution – Responsive Web Design Fundamentals Being a Marketing Designer – What is it, and how do you do it well? UDL Guidelines in Practice: Grade 6 Science About Author admin 100 Comments JoeGator23 September 14, 2017 Blank canvas has no header/footer. yes? I use Gpress pro, how would I go about this… choose not to display header? Just a bit confused for the GP setup, thanks. Reply Rafael Castaño September 14, 2017 Very nice, but only for horizontal menus. If I want to make a vertical fixed menu on the left… not possible. Sorry but I'll keep working with The7 and Visual Composer for a while. Reply Robert Marriott September 15, 2017 This is a great. Looks like Elementor is moving towards something like Beaver Themer. Is there any negative impact in replacing GeneratePress's header with a custom Elementor template i.e. page speed? Reply La Vuelta al Mundo sin Prisas September 15, 2017 Always great Dave! Thanks for your help to use Elementor and Pro. Cheers! Fernando Reply JoeGator23 September 15, 2017 If I click disable elements —> primary navigation to clear the standard menu from view, does it affect seo or anything else? Thinking to use Header & Footer plugin, make my own combined header with menu template and switch off the original menu. Also, could I skip the header entirely via disabling and treat the page as if it had no header? I('m using GPress pro, so no blank canvas option… confusing with unknown consequences. Do I loose any GP functionality on the backside if I choose Blank Canvas for the theme? Still learning, glad you're around, Dave. Reply Greg Meanwell September 16, 2017 Hi Dave, many thanks for this video and your other ones. As a novice to WordPress I am building an ecommerce website with Generator Pro theme and Elementor Pro. I've loved building the pages with Elementor but when i come to the blog and woocommerce pages its not so intuitive. Is there a video or course you can recommend to learn how to do this? Reply WrenchTech Unlimited September 18, 2017 I've got a couple of problems with the new nav menu that I haven't been able to figure out. Where can I get help? Reply Richard Pagliaro September 19, 2017 Great video mate. I'm using GP Pro and Elementor Pro and was wondering if it was possible to insert a search icon with the Nav Menu. I'm currently using that feature with the default GP menu. Cheers. Richie PS: To add this Nav menu as "Sticky", you can copy the shortcode in the "After Header Content" within GP Hooks and disable the default GP menu. Reply Mauricio Iraheta September 19, 2017 Great video! Do you know how do you remove padding from first and last child if needed and is there a way to have a home icon instead of the word home? Reply Abdoul Kader Sow September 19, 2017 Thumb up, Dave. Clear and very useful tuto. Thanks a lot. Reply REJIL Запускает бизнес September 20, 2017 Нормально, привет из России!! Reply chris c September 21, 2017 Hey Dave. Thankyou for a great video. I have one question for you please. I'm new to elementor and wordpress in general. I've started to build my website using the normal wordpress builder then installed elementor which I'm very exited about. The issue I have is that I already have the menu and logo on the page. When I use the new menu widget I then have two. I've hidden the menu and logo in the header but I still have the white space viable where the header should be. How can I delete this space so I can have my new logo and menu in its place. I apologise for my inexperience. I really hope you understand what I'm trying to explain. Kind regards, Chris. Reply Christian Steiner September 21, 2017 Definitely the easiest and clearest videos to follow. The pick of the crop Reply Jay Sahli September 22, 2017 Great feature, works like a charm! Reply Vasco Marques September 25, 2017 No surprises here, just another useful and great video from you Dave! Reply DJ RODRIGO September 26, 2017 hi there… how do u make a menu with the logo centered inline with menu? Reply Shahzad Haider September 27, 2017 Great video. How to make menu widget/Menu sticky ? Reply Schlomoh Brodowicz October 1, 2017 Hi Dave,At the end of your "How to Create Your Own Custom Header with Elementor" tutorial, you said you used GeneratePress's Transparent Page Header facility to slip the page content behind the header.Could you please tell me where is that facility located in GeneratePress customisation ?I really wonder how you can master all these tools so thoroughly in such short amounts of time… Reply Пользователь October 3, 2017 Thanks Dave! By the way, do you know how to change the Active menu item background color? I could only find the text and the pointer color settings, but no background color settings. Reply Maxime Freschard October 5, 2017 How would you create in Elementor a Nav Menu without using the WordPress Menus, but using static links ? thanks Reply Roelof Otten October 6, 2017 Thanks Dave! Great tutorial 🙂 Reply Mark Nasri October 6, 2017 thank you dave, great tutorial. god bless you Reply J W October 7, 2017 Hi dave. You had mentioned in an earlier video that for x reasons (sticky navigation, mobile header variants, multiple header layout configurations, mobile responsive) one should prefer to use their themes provided header function. But that was before nav menu widget was released. Do you still recommend the same thing or do you think that the nav menu widget covers those four reasons and you therefore recommended it over the native header function of the theme? Reply Surjeet Singh October 7, 2017 Please sir tell me where i put adsense verification code fully elementor based Website ? Reply Nm Sunny October 8, 2017 HI there, can I make my nav menu shrink sticky menu? can you make a tutorial about it? will be great to know for everybody Reply Surjeet Singh October 22, 2017 Does elementor page builder qualifies the Google Adsense policies or not?Please help me sir i’m in problem Reply James October 25, 2017 Great video, thanks for posting. Reply Lorenz Añoso October 31, 2017 why mine doesnt have nav menu widget ? Reply N H October 31, 2017 Thanks for another great video, Dave! Reply Romanas Chakra November 8, 2017 Thanks for your videos. Please make a tutorial how to make a vertical sticky menu (sidebar) using elementor. I'm strugling with it : Reply Juan Carlos November 11, 2017 Hi Dave. I wanted to thank you for your great tutorials; you've really helped me on several ocations. I just purchased an unlimited elementor licence through your affiliate link (15 minutes ago). God bless and take care. Reply Valley Girl November 16, 2017 Good Job! Reply Sophia Hannah November 16, 2017 Hi Dave, is there a nav menu option on the free version? Reply 1395570830 291757509320 November 17, 2017 great demo. used your link $$ xxx Reply Payam Hosseini November 21, 2017 Hello Dave. Thanks to Elementor develop team, many thanks to you to teach me how to use it. Reply OrthodonticA PC December 18, 2017 Is this the same menu as you used in the custom header video? Free Nav Menu Reply Pelis Culas December 18, 2017 How you take out the white LINE in the top of the page Reply Senor Mojo December 26, 2017 Hi,it's a great add-on, and one of the reasons I bought the Pro version. However, it doesn't seem possible to put separators or frames between the menu items, so they look boxed in individually, something I would like to do for one design. Do you know if there is a way within the nav menu? And I don't mean with the hover.Thank you very much for your generous offerings. Reply Samad Dada January 16, 2018 Thanks for the great video as always. Can we add a button to the header like they have on some websites? Reply Lane Watson January 31, 2018 Great Videos on elementor pro and GP. Could you do more with GP? also, I've tried the Elementor plugin, and it put's it code on all the pages, even one's I didn't use the page builder for. It's kind of bloating my site. Suggestion on how to increase page speed when using Elementor Pro? I'm already using Managed WP hosting, and cacheing plugins. Reply Gary Box February 7, 2018 Good video but I have a question. Like you I use elementor Pro with generatepress premium. Are you still generally doing your menus with generatepress or using this new feature in Elementor? I see some advantages of using elementor in that I get more freedom about logo size but I'm wondering if there are any downsides. The only one I've heard about is fact it's not sticky. Reply Wikash Bhawan February 8, 2018 How can I create for every page an other menu? Reply Amir Gelman February 9, 2018 1:14 – why the hell would i wanna bypass you?awsome tutorial + purchased it through your link.keep the excellent content coming. Reply Blazej Sendzielski February 15, 2018 Hi Dave, thanks for the video. It great and simple. I have a problem though. Once i built the menu it looks great on the desktop mode. When I switch to mobile (tablet or phone) i find that it transforms to nothing telling dropdown icon ( which i don't like). I think i was trying all the solution in eliminator tabs. I'm I missing something? I wish the menu on mobile looked like yours (full). thx for help Reply Glass Crystal February 21, 2018 Gotta going on with the tutorials like this one.Useful information.Clear and succinct.Thank you Reply Rene Michael February 23, 2018 Hi Dave.. Great tutorial. Well explained and easy to follow. I have a question though; I'm using a Genesis child theme for my website; Is it possible with the Elementor Nav Menu Widget to replace the Genesis Child theme's menu with one that I create with Elementor? hmm.. (Hope that question made any sense :)) Reply aldren barboza February 27, 2018 hi is it posible to put double menu list in it Reply Cummings Creations March 3, 2018 You are very good. I am having trouble withe my sub nav menu.everything is workining with the main menu, but the sub says no title. need help Reply Always Unlimited March 4, 2018 Any rumors heard about an upcoming sticky elementor nav menu? What would be great is to be able to design your sticky menu using elementor, save it as a template, then be able to just insert it using gp hooks to be used on all page as your secondary nav. Just daydreaming here. Reply Peter Johansson March 8, 2018 Anyone knows iHow I can set it up in all pages …..I have way too many pages to set it up Reply Majid Kadi March 25, 2018 Hi DaveThanks too muchTwo thumbs up Reply Manoj SuchDeva March 30, 2018 Hi Dave. I appreciate your teachings. Have seen most of your tutorials. Recently after elementor 2, my elementor canvas page goes back to default all the time. Is it some elem 2 bug? Reply Olaf Ebert April 5, 2018 Another great video that is easy to follow and pleasant to listen to. Thank you, Dave. Reply Michael Palombo April 10, 2018 Great tutorial! Is there an easy way to display the "menu name, given in WordPress backend" above the navigation? There is no option in the Elementor navigation widget. Reply Eskape Ent April 12, 2018 Working on this in wordpress with elementor pro. There seems to be a slight blank space at the top of my site (site wide) that is coming from stock word press. Any tips on how to get rid of this? Reply Sterling Williams April 14, 2018 SOLID walk thru video and host! BIG UPS Dave, and wow Elementor def changing the WP Whirld… curious, is this for Pro only? Can an image be added to the background of the mobile menus? Reply OhWhat World April 15, 2018 Woohoo. A generic, bland menu…. Reply Washington Wagner de Campos May 9, 2018 Excelente! Muito obrigado pelo tutorial. Reply Пользователь May 18, 2018 Navmenu's megamenu doesn't seem to work on Elementor, could you pls advice any other MegaMenu plugin for Elementor? Reply s s May 20, 2018 Can a menu like this one, all functionality, be created with this widget without CSS? http://themes.design4dj.com/#reportus Reply Antony Ebook May 23, 2018 GREAT tutorial. Is there anyway to change the pointer clour on each individual item? I just can't for the life in me work out what the CSS Selector might be. Thanks so much! Reply makmursentosa May 28, 2018 Hi, is it possible to make horizontal dropdown menu? Thanks for your help Reply Jaqueline Davila May 31, 2018 Useful and clear thanks a lot! Reply IamPaulBrown June 5, 2018 Can you suggest a way to load a mega menu from a list or a table instead of keying or cut-and-paste? Thanks for your help! Reply colin jones June 12, 2018 Great stuff. One problem, I seem to now have 2 menus on every page in mobile mode – the new super fancy one and the old grey one from pre nav menu days Reply Emma Richel July 1, 2018 Is there also a standard way to use the active state of the menu along with page anchors? Reply Neadekvatnij July 7, 2018 Hi, I do not have pointer background option in main menu option. How to fix this? http://prntscr.com/k3n3c1 Reply henuke July 11, 2018 Hi!!! i'd like to use a smaller font in the menu, is it possible? Reply fred groom July 25, 2018 Thanks for the video. I am making a shop website and the drop down list is huge and goes way off the bottom of the page, is there a way to split the drop down menu into multiple columns? Reply Akshay Krishnan August 4, 2018 Hey Dave. The video worked like a charm. Could you just help me out with how to add a search bar to the custom menu? Reply Denise Guevara August 16, 2018 I have 2 menus now. One seems t be innate to WordPress and I don't know how to make it go away. Help please. Reply Miklavz Grmek August 22, 2018 Hi, if I have a custom header build with Elementor pro and a contact button in the navigation, how do I achieve to have that contact button in the mobile dropdown? Reply Sofia Tavares September 18, 2018 Is it possible make mobile menu horizontal instead of dropdown? Thank you so much Reply Ioana I. October 25, 2018 Hey Dave,someone else was asking you some time ago about the "active menu item background color" i have the same issue, i can't change itis there an option for that ? Reply CutiaAxe October 29, 2018 Hello Dave, thanks for you're very helpful tutorials. You explain things very clear and easy to understand for someone like me, who's not so fast with picking up all the options that elementor gives us. I am trying to build a custom made hamburger menu for desktop. I can't seem to find:– how I can make dropdown menus unfold, when you click on another drop down menu.– how I can change the style of a dropdown menu inside a dropdown menu.(on the https://tonyschocolonely.com/nl/nl you can see an example of what type of hamburger menu I would like for my own site)Do you know how to create this in elementor and if so, is that something you can add to this or another video? Reply Mariano Gianni November 1, 2018 How can I change the dropdown icon? Reply Sofia Dalla November 21, 2018 Hi Dave, do you have any idea why I don't have all those options under Layout. I only have title and select menu. Thanks Reply Syaefullah Kamal December 5, 2018 how to move humberger menu icon in mobile to right side , and logo in in left side Reply Jose David Ramirez Perez December 9, 2018 Gracias por los videos, mi consulta es si se puede realizar menus pegagoso con elementor? Reply hannah moren January 6, 2019 Ahy am I so thick? I can't turn off underline for the life of me. And not pointer underline, just the underline that's there all the time. I turn it off to none in decoration under style but nothing changessssss. what am I missing here? Reply Kartik Ahuja January 7, 2019 amazing Reply Smita January 10, 2019 Thank you for creating elementor videos.Please make a videos on :1)How to make a fixed header,logo menu on all the pages and posts?2)How to use astra theme with elementor pro?3)How to use twenty ninteen theme with elementor pro? 4)Mailchimp step by step tutorial? Reply Mike Wilkinson February 5, 2019 unreal video, amazing software!!! Reply Henstra Design February 6, 2019 If you could create a vertical logo with nav menu, that would be very helpful. There doesn't seem to be any videos that illustrate this for Elementor Pro. Cheers! Reply Darren A. Chilton February 7, 2019 pro pro pro, i just want free stuff Reply Steve Cooper February 16, 2019 Great job Dave very creative what you've done and nice video and explanation.thanks Reply Dieter Morinem February 18, 2019 Cool video. Is there a way to have active menu item (blog) when on single post (template)? Reply CE L March 2, 2019 NAVMenu not showing in Elementor widgets dashboard??? Reply KingLouisDude March 27, 2019 Hi, great, thanks for the ideas. Now: how can I create the menu for ALL PAGES??? Can I simply copy and paste? Or is there a trick? Reply Denis S. March 29, 2019 btw Groovy Mega menu works fine with Elementor Reply Marian Lomarti April 11, 2019 Thank you so much 🙏🔥🔥 Reply Sietse Berkhout April 19, 2019 How to put a vertical border between your desktop menu items? Reply R W May 22, 2019 Can u have any kind of control with a navbar without paying? Don't mind but it's not clear at all . Reply Amer Zec June 3, 2019 Dave this was exactly what I was looking for after switching to Elementor Pro. I have been struggling with one of the Primary Menus that got imported with one of the themes, not realizing how much actual flexibility Elementor gives you with this as I am new to it. Thanks so much for this great content, very appreciated! Reply Serdar Kamolov June 28, 2019 wish Elementor had a feature to customize and add columns in the menu (like a mega menu) Reply 3121babe July 18, 2019 I'm having a problem when I style the nav text. I want the normal view to be normal weight and the hover and active view to be heavier. However when I change the hover view specs to a heavier font style, then my normal view changes to that as well. I should be able to style hover and active any way I want shouldn't I? Reply MsundrstdGaming July 24, 2019 Requires Elementor Pro Deletes domain Reply Mukul Dixit August 19, 2019 Hi Dave, Kindly show on "Active Menu" part. In elementor we can not change background on Active mode. Looking forward your video on how to set up Active setting. Reply Robert Soeterbroek October 16, 2019 Nice tutorial, nice tempo, nice voice. Have a nice day 🙂 Reply nur shaadah October 31, 2019 why i put the web logo..put the logo doesnt appear? just want to know where it linked? Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.