The NEW Elementor Nav Menu Widget-In-Depth Tutorial
HTML-код
- Опубликовано: 11 сен 2017
- Released in Elementor Pro 1.8 today is a new mobile responsive navigation menu widget. It’s a very much requested feature and the start of Elementor truly moving beyond simply building static pages.
I’ve had a chance to have a play with it and it’s fantastic.
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.
Elementor Pro:
www.designbuildweb.co/recomme... (affiliate link) 
Кино
Gotta going on with the tutorials like this one.Useful information.Clear and succinct.Thank you
That's the idea. ;) Thank you!
Very handy to post this the day of the release. That's a double win for us! Thank you very much, Dave.
Thanks for your kind words Miguel!
Hi Dave. I just wanted to say thank you for all the vid tutorials. They are easy to follow and I really like your teaching style. Keep up the great work :)
That's fantastic feedback. Thank you. :) Hard work but great fun and 100% worth it.
Once more two thumbs up Dave for this spicy tutorial. You have no idea how valuable your tutorials are.
Thanks very much indeed. I *always* appreciate your support and encouragement.
Great tutorial - paced at a relaxed speed making it easier for newbies like me to follow! Thanks
Ah nice. Yeah, I like to take my time and make sure it's explained properly. :)
No surprises here, just another useful and great video from you Dave!
Thanks my good man. :)
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!
No worries Amer! Glad to help.
@@DaveFoy hii sir please do the video on multi step forms using only elementor pro .don't use Piotnet Addons For Elementor.
Another great video that is easy to follow and pleasant to listen to. Thank you, Dave.
Thank you Olaf. That's great to hear.
Awesome video, Dave! Thanks for creating it. It helped me a great deal. And killer design in the video!
Ha haa, thanks Anthony. :)
Definitely the easiest and clearest videos to follow. The pick of the crop
Thanks Christian. I aim for easy and clear. :)
Hello Dave. Thanks to Elementor develop team, many thanks to you to teach me how to use it.
No problem!
I have problem with showing video at my page by self-hosted. Elementor have any option for that? in china we don't have access to youtube or viemo, do you have any idea?
Great job Dave very creative what you've done and nice video and explanation.thanks
Great video Dave Foy.
I really really liked it!
Keep up the good work!💪💪💪
Thank you so much Josh. That really means a lot to me, coming from you.
Very helpful. Thanks...from NZ
Thanks Dave for your tutorial!
Thank you Philippe. I appreciate you saying.
unreal video, amazing software!!!
Thanks for another great video, Dave!
You're very welcome. Thank you.
Always great Dave! Thanks for your help to use Elementor and Pro.
Cheers!
Fernando
Always great to hear from you too Fernando. :) Thanks man.
My pleasure! Read my message in FB please! :)
Cheers!
Dave with the Elementor Menu is not possible to have sticky menu, right? Ummm!
It's not a built-in feature. You could use this plugin: wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Thumb up, Dave. Clear and very useful tuto. Thanks a lot.
Thank you Abdoul. That's very kind of you to say.
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?
Thanks Dave. Another great tutorial.
Thank you sir! Good to hear from you too.
Another great video, thank you Dave!
Thanks Chris! Just seen your email.... ;)
Hi Dave, about the Nav Menu Widget...
I have tried it and it work great, I was wondering since we can use this new menu, can I make all my pages with it and my custom copyright with Elementor? That way I'm still using GP but everything is made with Elementor.
Thank you :)
Yes you can do that. You just need to make a custom header template and then replace your GP header with it.
Easiest way is with the Header Footer Elementor plugin. See my video: www.designbuildweb.co/custom-header/
thank you dave, great tutorial. god bless you
Thank you Mark. Very kind of you to say.
Life saver - thank you!
Great video, thanks for posting.
No worries!
Thanks Dave! Great tutorial :)
Thank you Roelof!
Great feature, works like a charm!
Good isn't it? :)
Great video Dave... thanks again!
No worries my friend. Always a pleasure. :)
WooHoo!! Thanks for another great tutorial!
Thanks Dee!
Awesome, thanks Dave
Thanks so much Verdi. I always appreciate your encouragement. :D
Useful and clear thanks a lot!
Great to hear. Thanks Jaqueline.
Thank you so much 🙏🔥🔥
great demo. used your link $$ xxx
Wow, thank you! :D
Brilliant video - thanks a lot
Thank you Sharon.
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!
Excelente! Muito obrigado pelo tutorial.
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 it
is there an option for that ?
1:14 - why the hell would i wanna bypass you?
awsome tutorial + purchased it through your link.
keep the excellent content coming.
Aww thank you! I don't do this for affiliate sales, but it's definitely a nice to have. :) Thanks again!
you sir, need to be hired by elementor!!!!! your tutorials are so much better!
Thanks Dave an other big surprise like always
Heh heh - thank you!
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 :))
Excelent video. Thanks for the tip
No problem my friend. Glad you like. :)
Hi Dave, glad you are back. Great video. I have a non-menu related question. My customer is used to original wp editor and doesn't want to use elementor to add content on page. Is it somehow possible to design page in Elementor but still be able to use classic editor on this page? I am guessing hooks or AE? Thanks.
Thanks Libor! You can use AnyWhere Elementor Pro for that. I have a video: ruclips.net/video/yLWLd705c3Q/видео.html
Nice tutorial, nice tempo, nice voice. Have a nice day :-)
I will. Thanks Robert.
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
Hi Dave
Thanks too much
Two thumbs up
Awesome!
Hi Dave - Top work in getting this video/overview turned around so quickly.
I've a slight nervous in upgrading theme/plugins that other plugins rely on - I'm thinking of occasions like when WooCommerce does a big upgrade, all the plugins that hook into WC take a few days to catch up with the changes that the new WC has brought.
Have you found any Elementor / GeneratePress plugins/theme have problems with the v1.8 release?
Thanks Simon. Was a bit of a push, last minute thing. Glad it turned out ok!
I know what you mean about upgrades. It's why I prefer to use native functionality - like the new nav widget - rather than 3rd party stuff. Usually gets turned around quickly.
Elementor won't have problems with the Pro release, it's the same team. GP functionality isn't really affected by this either.
I've been in that particular WooCommerce boat a few times in the past. Urgh. Never again! :)
Thanks for the great video as always. Can we add a button to the header like they have on some websites?
Not with the Nav Menu widget yet I'm afraid.
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.
Thanks! Can you tell me why I have a white block behind the header and the top of the menu after I activated it? I would like for it to be transparent like it was with my original header and menu. Thanks!
Good Job!
Thank you!
Thanks for the video so soon after the menu widget's release, Dave! I wanted to use the underline option but don't like that we can't control the width. Do you have any CSS to make it the same width as the text (and not to include the chevron)? Thanks!
Well apart from the chevron, just set horizontal padding to zero, and then space between to something like 30. Would that work?
The chevron - I can't figure out how you'd do that, with how the widget works. The arrow is part of the list item and therefore the underline too. I'm a bit stumped on that one, sorry!
Thanks, Dave! I'll give it a try.
Thank you Dave for another excellent presentation. What if the client asks for a mega menu with multiple sub sections and images? And what about a menu that stays on top when you scroll?
Thanks Gil.
I'd say you'd be better off with a mega menu plugin for that. Max Mega Menu is great: wordpress.org/plugins/megamenu/
Sticky menu: try this - wordpress.org/plugins/sticky-menu-or-anything-on-scroll/. I think Elementor must be working on both of these for a future release. :)
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.
It doesn't look like there's the option for that. :( I think you'd need a bit of custom CSS to set that, unfortunately.
Happy to help if you can give me a URL.
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!
Hi Dave. Is it possible to make a large/mega menu just from Nav Menu in Elementor Pro (even if using basic CSS)? Say large/wide block, 3 columns e.t.c. If not can you recommend a good plugin as it's for professional sites - although I've just bought E Pro so the cheaper the better! Thanks!
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?
Hi, is it possible to make horizontal dropdown menu? Thanks for your help
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
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.
I still tend to use GP's header feature, just cos I think the balance of features is better that way.
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?
Yes I reckon a bug. Could have been fixed in a latest update by now?
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?
Hi Greg. There's my video on creating the single blog post template with Elementor: ruclips.net/video/yLWLd705c3Q/видео.html
I can highly recommend my friend Nick's 2 videos too:
ruclips.net/video/RqFzm2w-3Yk/видео.html
ruclips.net/video/EBuw5dBXoO0/видео.html
All require the paid AnyWhere Elementor Pro plugin: www.elementoraddons.com/anywhere-elementor-pro/
That should get you pretty close. :)
Thanks Dave, will give those a whirl
Cool video. Is there a way to have active menu item (blog) when on single post (template)?
You'd have to use a bit of custom CSS for that I think. It'd be a case of finding out what class name is applied to the active 'blog' menu item when you're on a single post and then set that selector to be the desired colour.
Navmenu's megamenu doesn't seem to work on Elementor, could you pls advice any other MegaMenu plugin for Elementor?
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?
Do you need to have a specific theme to do this? For example I have ASTRA free version.. will this work?
Really like your style of presentations David. Very informative and low key. Will be contacting you directly (actually how do I?) for advice on building out a local information website, looking for database potentials et al. Cheers, David M
Great, thanks David. I'm at hello [at] designbuildweb [dot] co
Hello Dave, Thanks for the nice tutorial, but i have a problem, the menu in my elementor is showing only in vertical, even when i choose horizontal ... I tried a lot to search for solution, I hope you can help. thanks in advance.
Hi, i have the same issue did you fix it?
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
I'm sorry Sofia, no idea! You'd have to ask Elementor support I'm afraid.
Another great vid Dave, silly question perhaps, but do you have to add this to every page? as the WordPress theme generated menu would normally be included in every page. Does that even make sense? lol anyway thanks, Nick
Makes perfect sense Nick. If you wanted your menu on every page, the easiest way is to use the Header Footer Elementor plugin. You create your header template within that plugin's settings page (under Appearance). That then replaces your theme's header throughout your site.
You can of course keep your theme's header and just replace the nav. But that depends on what theme you're using. Happy to help if you need it.
Dave, how do you get rid of the already existing header that wordpress have? so there will be no multiplied headers lol. And thanks for this question and comment to you both! it is exactly what I was looking
for.
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
Is it possible make mobile menu horizontal instead of dropdown? Thank you so much
great, could you do a tutorial on , product archive page design with elementor ? left page designs
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?
No not with this widget. You'd have to use a separate plugin like Max Mega Menu I think.
Thanks for the info! I have installed it now, but am i missing a trick somewhere? It just displayed a list of unformatted text in the page, not a menu bar? i cant find any info about it online
Thanks for the perfect tutorial but for some reason i cant define the backround color in dropdown menu (desktop)
Good one Dave - dare I say it - better than the Elementor Video
Thanks Gordon. I think Elementor's videos are just meant to be quick feature run-throughs. That's why I went all in with this one, very in-depth. :)
Hi!!! i'd like to use a smaller font in the menu, is it possible?
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?
No I'd still recommend using your theme's header if you can. The new Nav Menu widget still doesn't handle any of those things, any differently than the previous 3rd party nav menu widget did.
thank you Dave.
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?
In Appearance > Menus, you have to create a new menu, choose the location as the one your theme has set for the main navigation (each theme calls it something different), then add pages to the menu and save it. Then it'll appear on all your pages.
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?
Hi Mauricio. Thank you! You'd need custom CSS to remove the padding. Try this (not fully tested):
#elementor .elementor-nav-menu--main li:first-child .elementor-item {padding-left: 0; !important}
And for last child:
#elementor .elementor-nav-menu--main li:last-child .elementor-item {padding-right: 0; !important}
Let me know if that works.
Nice thank you! what I did is also remove all padding and added just spacing. But will try this. Do you know if there is a native way change HOME to an Icon?
Oh sorry, you did ask that too. :) That I'm afraid is beyond my skills. You might have to use javascript to achieve this.
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!
Gracias por los videos, mi consulta es si se puede realizar menus pegagoso con elementor?
You can make sections sticky, so you can make the section that contains the menu sticky. Otherwise use a plugin like en-gb.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Thanks for your videos. Please make a tutorial how to make a *vertical sticky menu* (sidebar) using elementor. I'm strugling with it :\
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.
No, no impact on SEO.
And yes, just disable the header completely if you want. You can either use the Elementor canvas template in that case, but that will remove footer too. Or just disable the header per page, using GP's 'disable elements' meta box on the edit screen for each page.
You can also remove GP's header completely with a bit of code. Add this to your child theme's functions.php file (if you use a child theme), or install the brilliant Code Snippets plugin (wordpress.org/plugins/code-snippets/) and it there:
add_action( 'after_setup_theme','tu_remove_header' );
function tu_remove_header() {
remove_action( 'generate_header','generate_construct_header' );
}
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.
You might have to write a little bit of extra CSS to get the precise design you want.
I guess I'll learn CSS then. For the time being, as a workaround, I created single-item menus and put them in side-by-side columns, in order to take advantage of the hover effects available.
Can you recommend a good place to learn CSS. I know there are a ton, but if you have a specific suggestion, don't be shy.
Thank you again for your answer and very well-made tutorials.
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?
Thanks Bob. Technically I'd say yes, loading in another lot of code must add extra weight. But I'd think it would be minimal. By the time you throw page caching in, probably no difference. Best way is to test it, using a tool like tools.pingdom.com/ or gtmetrix.com/
Thanks!
Hi Dave, thanks for this great tutorial!
So as I can see from your tutorial, a sticky menu isn't possible yet, right?
Not directly in this widget, no not yet. There's this plugin might help? wordpress.org/plugins/sticky-menu-or-anything-on-scroll/ - put an ID on the widget and then set that in the plugin settings.
Sticky Menu (or Anything!) on Scroll was last updated a year ago. Is there another plugin you may recommend? thanks.
new version of header footer will have that functionality i believe
Hi Dave. Another question. As I can see, you are using the Elementor canvas template for this tutorial. How can I make sure, that the footer and header (with the custom menu) is always the same on the subpages/other page of the website when I use the Elementor canvas template?
By the way: I can recommend the mystickymenu plugin, which works great for the custom menu of Elementor in order to have a sticky menu: de.wordpress.org/plugins/mystickymenu/
This plugin was last updated 5 days ago.
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.
Hi Richard. Search icon - I'm afraid not, not yet anyway. Good tip about the sticky nav! :)
Cheers for the reply. Will stick with the GP nav menu for now then. Richie
Yep the GP nav is really fully featured. Definitely use it if you can.
There's a plugin that allows you to place your GP nav menus wherever you want with a shortcode. If you want the details, drop me an email: hello [at] designbuildweb [dot] co - it's not in the WP plugin repo.
Hi Dave, THanks again for that ! Using Generate Press Pro for the main menu navigation before this new feature of Elementor Pro, how to disable the primary navigation menu in Generate Press now ? Thanks
got it :)
Great! Yes, it's easy in the Customizer. :)
Would love to have the detail on how to make the WP/Theme default menu not show too Dave.
I've tried lots of options in Customising. Only thing I've been able to do is get the menu to disappear, but that's replaced with a list of the Page, styled the same -> easycaptures.com/fs/uploaded/1156/2908174909.png
I know it must be simple, but cannot find - which makes it all the more maddening :)
(I've the same setup: Elementor Pro & Generate Press Premium ('casue you recommended :) ))
Have found the answer in another of your videos Dave :)
Summary -> easycaptures.com/fs/uploaded/1156/1323402148.png
For those wanting the full detail, watch at this point -> ruclips.net/video/Tq4AfgD9NM8/видео.htmlm
How do i use this elementor menu to show on every page and post on top.....as well as how to do I show my footer at end on every page and post. Because it only show on home page. Please help
Hey, when I go to a page from the menu, that menu item on the menu will be invisible. anyone know how to make it visible when on that page?
How to put a vertical border between your desktop menu items?
why i put the web logo..put the logo doesnt appear? just want to know where it linked?
Great video. How to make menu widget/Menu sticky ?
Easiest way is with a plugin: wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
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...
It's now in GP's new Page Header feature. I show it at the end of this video: www.designbuildweb.co/generatepress-dynamic-page-headers/. Hope that helps?
Many thanks for answering Dave ! I just spot it in the video you mentioned. You are great !
Excellent! Glad you found it!
Thank you Dave. Let me ask this please, can this widget create a merged-with-content header to be used for all the pages and swap out the navigation menu that my theme has for what I'm now able to create using this widget?
Depends on your theme. For swapping out your theme's header, easiest way is the Header Footer Elementor plugin. Works with GP, Astra, BB theme. OceanWP support coming shortly (though you can do that anyway in OWP's Customizer). See my www.designbuildweb.co/custom-header/ video.
Merged - yes, again depends on your theme. If GeneratePress, I have a video where I show this right at the end, though you'll need to watch it all for it to make sense. www.designbuildweb.co/generatepress-dynamic-page-headers/
YOU ARE AWESOME!
Thank you sir!
can you make a sticky menu with this? and if so how?
Yes, try using wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
amazing
Thank you Kartik.
Hi Dave, is there a nav menu option on the free version?
Sadly not Sophia. It's for Pro only.
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.