hey it's tom from wpwithtom.com and in this video i'll be covering how to use the elementor pro nav menu widget so before we dive into using the navigation menu widget i just wanted to say that if you don't already have elementor pro you're going to need to use this widget here and i highly recommend that you pick it up if you want to get it and support my channel you can get it at wpwithtom.com elementor i also wanted to mention that i've got a whole playlist of videos covering all of the elementor pro widgets so be sure to subscribe if you want to see them and with that out of the way let's dive into the video so right here we have just a basic site there's actually no menu showing at the top i'm just going to get started by clicking edit with elementor on this page and once this loads here we're going to see that we have the option to just go and click here and add a new widget so what we can do is just click on the plus and we can also just go and find where it says nav menu right here and drag it and just drop it right in so by default this is what the menu will look like for us on the site i have a home about services and contact and that is the pages that i have on the site back here and if you went to appearance menus you could see that that is the setup here so within this area the first thing that i'm going to do is go over the basic changes that you can make here so the main menu here is the one that's selected and that is also what this one is within the dashboard if you had other menus it would be in this drop down you can choose to use a different menu if you'd like now here for the layout it's currently horizontal but you can also make it vertical if you want and you can also make it a drop down and it goes to this hamburger format right here i'm just going to leave it as horizontal since i am on a desktop and you can see it better now for the alignment i'm specifically just going to go to the right because i'm eventually going to put a logo on this side of the screen so i want it aligned to the right in this case and then i'm going to go down here to where it says pointer if you want to change this you can there's a lot of different options some of the ones that people like to use are let's go with background right here so you can see that which page you're on has a background when you hover over it goes to one with the background now we can change this kind of color and scheme here in the style tab but we'll get to that in a moment here and another one people often use is double lines so you have top and bottom i personally like the underline the most which is the default here for animation i'm going to leave it as fade but you can see that there's a lot of different options i also like the drop out so if you hover over it you can see what the line does it drops down from where it says contact services and it slides down you can also have it just slide right in from the right and that is another feature you can see that and you can try different ones go with grow right here you can see it gets bigger and expands from the bottom i'm just gonna go with fade and leave it as is it's pretty basic but you can use whatever one you want here for the sub menu indicator i actually don't have a sub menu on here but you can change that and i would probably go with classic or chevron in this case because they're probably the two most known as far as seeing a drop down menu in a sub menu so i'm just going to leave it as classic even though i don't have one right now so right here this is actually pretty interesting if we see it says mobile dropdown breakpoint and then tablet so if i were to go and change that to mobile let's just go and click update right now and then if we go over and preview the changes here in a new tab i'm going to go and then minimize this and make it smaller so if i go and i just drag it in you can see once it gets smaller than a tablet it goes to this size so if this was a tablet right here the menu is still full size and it's showing up here without the hamburger menu and then if i make it smaller it goes into a hamburger menu so if i were to go back here and change this to be tablet it would still show the whole menu on a tablet so let's make it small again over on our page that we're previewing and once we make it larger it's actually still showing the menu as full width and then once we get the tablet it goes to the hamburger so it depends what you want to have here in this case i'm going to use the mobile i like how the mobile looks more and i like it to have a full menu here on the tablet size so right here this would be tablet size i like it that it has the whole menu up here and then it only uses the hamburger on mobile so if you change the breakpoint to be mobile right here that's what you would have and i'm going to leave it as is so another thing here is full width i'm going to enable that so let's just go and i'll just click update to make it go into effect and we'll preview it here on the site so within this area if we were to click on this now it takes up the full width of this area so it goes all the way over here if we didn't have that enabled it would be smaller so if we had that off and just click update let's go and see what the new one looks like and we were to click on this it would be actually not all the way across so it's hard to see here but there is some space on the edge here maybe if i expand it a little more you can see it but it really can't really see too well anyway i'm going to leave it as full width in this case so i'll do that and just click update so for the alignment i'm going to leave it as a side and that basically means when you have that drop down on the menu in the hamburger menu it's going to align it to the left side here and then toggle button i'll leave this hamburger and alignment you can have it centered you can have it left or right i'm going to leave it centered here as well so let's go over how to add a logo to this area so if we went up here to the top we can just go and simply right click on this gray box here and click duplicate and now it looks like we have two menus then i'll just go within this one and right click and then i'll click delete and now we have the option to add a different widget so i'm going to hit the plus icon and i'll go to image right here and i'll drag it in and drop it and here i'll just go and choose an image and i'll select this logo i have now this is a white logo and i'm going to use this on a transparent background so you can't see it very well right now but let's go right here in the middle and we can drag and resize the area as needed so if i wanted to i can go like this and it will resize it it's going to be a little bit easier to see it as we go forward with this and make it more transparent for the background and we're going to have the menu actually be on this image for the transparent background so to get started with that let's go and change some of this up i'm actually going to go and i'm going to right click right here edit section on this image itself and within this image i'm actually going to go over here and go to advanced so within the margins here i'm going to go and make this a negative for the top and you're going to see it's gradually going up and over the top but you can see that you cannot actually see the logo right here so what we're going to need to do is right click edit image and we'll go to where it says advanced and then for the z index we're just going to make this one and it's going to put it in front of the background image so what i'm going to do is just go right click edit section and i'm going to continue to make this smaller for my case it looks like it's probably going to be around 80. it looks like it's near the top right now but i would go a little extra each time maybe about 15 pixels extra than you think it is because when you actually preview it doesn't always go to the top so i'm just going to do that and click update here with this margin negative 90 for the top and then i'm going to go over and start editing this menu so we can see it a little better so i'm going to right click edit nav menu and then i'll go over to style so within the style area we can change the text color i'm just going to make the text color white so it's nice and easy to see on this background here and then what i'm also going to do is go over to main menu and then i'll go over to hover and for the pointer color i'm going to change that so that's this green right here if we were to change that you can see it turns blue i'm going to make it a nice blue that stands out a little bit i'm just going to copy that and i'm also going to make that one the active one in this case for this example so i'll leave that as is and i'll just click update and if we were to hover over this you can see that now when we hover over it has it with this line under for this pointer line and another thing that we can do here is adjust the typography so right here we have typography if we just click on that you can see it's the font family of default for the actual theme layout here and you can go and increase it and decrease it as needed obviously it looked pretty big there there's a little bit of a delay as i'm editing it so maybe you might want it to be like 18 or something like that a little bit bigger and then you also can change the weight you can actually change the font family as well so let's just go with the good old lato and see what that looks like so you can adjust it as needed it's very easy to adjust if you want it to be larger i tend to like my font size in the menu to be a little bit on a larger size and then once you're happy with it you can go down here and click update so we can go over here and see that now this is what it looks like with the new menu and you can see the pointer underneath it it actually looks pretty good overall and that about wraps it up as far as the elementor pro nav menu widget goes there's actually a lot more that we can do within this section you can make so many different changes in here to the typography to the hover actions the effects you can change padding drop down you can do stuff with the button you can do a lot of different things and i really just scratched the surface but i do hope this was at least helpful and you found it to be beneficial if you did please consider giving it a thumbs up and subscribing for more wordpress related tutorials thanks for viewing and have a wonderful day you .
In this video I go over how to make a transparent header in Elementor by using the Elementor Pro navigation menu element. This element is a powerful one that allows you to really customize your menu look at feel. I hope you enjoy this Elementor nav menu tutorial!
Other WordPress Builders:
– 10% off!
Best Online Course Platform:
Favorite Design Tool:
Awesome Software Deals:
Get WordPress help:
#wordpress #wordpresstutorials #wpwithtom
FTC Disclaimer: This page contains affiliate links. If you purchase a product through one of them, I will receive a commission (at no additional cost to you). I only endorse products that I have personally used. Thanks you for your support!