hi guys how's it going John Lennon here again for another quick tutorial today I'm going to be showing you how to edit a navigation menu so within the actual website so look at the top here this is just a pretty straightforward playing navigation menu so for this tutorial I'm going to show you how you can sort edit a navigation they need to look within the same style as the template of the page that you're building so scroll down here and I've look for a cool template let's just go down here okay so let's just click the interior designer template so let's wait to load up can be a little bit slow okay it's not too bad today alright so let's go down here okay so let's say if you want it to add a navigation menu say around here so what I'm going to do here is click this spacer oh actually no I need to add another section so like that okay so I've added a new section there I'm gonna drag this up here the area that I try to a navigation menu on just now okay so now that is there I click this little button here and go to the style tab backgrounds I'm gonna do is I use a is use something called a color picker you can get that from colorzilla calm okay so and what that will do that all them copy whatever whatever you hover over you'll get the pixels or the RGB color of that actual individual public page that's why as you can see at the top left so in the top there you can see that it's now got that gold is quite that gold is color so if I click on that left click and then I go back to the color picker copy that code and then here this section should turn gold when I put that code in there there you go so you've got the same style as the some parts of the website now we're gonna add our navigation menu so if I scroll down here choose the nav menu widget oh you gotta do is drag and drop that in there and then I'm into sensory and then from here it's literally just editing it so it looks a lot clearer and so forth so if I just get rid of the underlying yes I think it looks all clean if it doesn't solve hover running you have an underline okay so if we go to the style tab take color so I'm going to change that to a dark boy because at the moment it's a bit grey and you can't see it too well see that pops out a lot better and then if we go to the hover button so we'll just choose something else that looks that should stand out let's go for the green so now we'll hover over the top of it it should be looking as green and there we go so yeah these that this is just one of the ways that you can solve edit a custom made navigation menu within a webpage to your building in elemental ok and also you've got you can adjust how far apart you want your navigation tabs to be as well and yeah they should just have a mess around but you can even change the style of the font just go open sans I normally use that one it's quite quite clean ok so that looks pretty cool transform so you do all this sort of stuff you can capitalize it lowercase uppercase default let's change the size of it so yes sky's the limit really obviously why you're doing this you want to check what it looks like in the mobile so yeah you should be king yeah little drop-down menu there let's go back to the desktop yeah and also when you're testing it you want sort of have it in full screen as well see you can see how things are looking yeah that that's basically how you build a custom-made navigation menu within elemental so hopefully I've made it as simple as possible for you and yeah just just try different things and then if you're building a web page see what works for you and leave any details in the comments below I'd love to see how you guys have done your navigation menus and just keep you updated what you guys are up to I'll speak to you soon see ya .
I also show you how to use the colorzilla picker tool to get the right color for the background of the navigation menu
For the color picker tool head over to:🔥
For your Hosting get over to Bluehost:🔥
DISCLOSURE: If you use our discount link to make a purchase, we get a commission at no cost to you, so that helps us out too.
Get Elementor Today:🔥
You Can Now Get my FREE! Video Course teaching you how to How to Buy your hosting and installing your website head over to my website to get this:🔥