hello friends I'm Nick from blog.com in this video I'm going to show you how you can create different menus using the nav menu widget of Elementor pro plugin okay so this is very very important and this is very strong for the first time using a plug-in using a page builder you can actually create a menu this was not possible before this okay so I I'll show you in depth about everything about everything about this particular widget so that you can use it and create a menu according to your choice for example I have created two different examples is the first one okay so here I have created a transparent many as you can see this is a transparent menu I have added some animations when I how or this I have I get a very beautiful animation I have also a lot to show you how to add different animation and different option to sub menus this is the second option the regular menu okay and this is 100% mobile friendly let me show you okay so this is as you can see in mobile this is how it will look very very useful okay so this is mobile friendly this is 100% awesome you can create any kind of menu you can give many to that many different types of animations that you can give to this particular menu okay now before proceeding further make sure you subscribe to my channel and also click on that Bell icon so that you don't miss any further videos okay with that being said let's get started so to do so first I create a page a blank page so that I can show you everything step-by-step and make sure you select page filter blank from the template because you don't want the menu to be shown at the top we want our own custom menu if you select anything else then you will get the menu okay so we don't want that we want to create our own menu now click on edit with Elementor as you can see over here I already have a template installed so I will be working over here and show you how to add first we will see how to add our transparent menu okay so what do you have to do you have to drag this nap menu at the top of whatever this is this is the text and we'll drag this at the top of this text so as you can see over here we have menu and this is transparent okay so let's see all the settings so here the first one is layout settings if you have multiple menus you can select your menu whichever menu you want to be shown oh here I have only one menu so I am getting only one option the main menu option you can also change the layout option by default it is set to horizontal you can make it vertical okay so this is how it will look like you can also make it drop down we will be using this drop down thing when we create a menu for mobile later on in this video now let's again make it horizontal you can also change the alignment by default it is set to right you can make it Center by default it is set to left you can also make it Center right justify it whatever you like okay so let me make it right side okay I hope you guys can see this menu oh here okay now the next one is pointer option by default it is set to underline let me show you what that is when I have or this menu any of the menu item as you can see there is an animation the color of the menu item changes and there is a line at the bottom okay so that is underlined you can change that too or line now the line will be at the top as you can see there are many different for example framed one when you select this this happens now let's select a different one for example instead of frame on like let's select background and when you select program this is what happens okay so we have different pointer options and for each pointer options that different animation for example we selected background and for background we have different animation by default it is set to fade as you can see now we can change this to grow okay so now power and you can see the animation has changed you can also change these to different things like sweep right now let's again however and as you can see the animation is again changed so you can select any animation you want now select the next option which is submenu indicator which is nothing but this or if you see besides fashion that arrow that is the submenu indicator so it indicates that this particular menu has a submenu okay so you can change that it is set to classic now you can change to sever on angel plus if you want a plus sign besides that menu can also have that okay now here is the mobile drop-down we'll see this later first we will see all the desktop settings and we'll move on to mobile setting now go to style the first thing is we have to change the color of this menu item so that we can see on our screen because it is by default set to light gray which we cannot see on this particular background so let's sell it well let's change the text color to white now as you can see it looks much better we can see it more clearly fine now is the typography option if you want to change this size of the menu you can change it from your it's all up to you okay you can make it small bigger you can also change the font family let's select Roboto okay I like Roboto you can also change the weight if you want to make it thinner you can select 400 or 500 okay if you can change the style you can change the Lahaie Knight you can also add some spacing let's add some letter spacing because you can see look this looks much better okay you can add some horizontal vertical padding let me show you what this is see lets me make it zero so when I make it zero as you can see there is no gap between any of the menu so when I increase the horizontal or padding the gap between the menu item increases and lets make vertical padding:0 when we put vertical padding:0 all the padding at the pot top and bottom becomes zero so let's increase this also okay very important settings now space between you can see space between the menus border radius we don't have any border so we don't need a bottle radius now this is the first option normal power and active so we have say see in the normal options now let's go to our options first one is text color so we want white text fellow fine now pointer color I want a different pointer color so I will select anything like this like this pink color may fine now let's see the changes okay as you can see now when I hover this I get this color now let's make it more lighter fine so this looks much better so you can change your power options from your okay then you have active option active is basically for example let's see oh here this is the SU page is active over here so what options do you want so your the active option is you can see the background color is white and the text color is gray so that is what it is so here if it is homepage then what you want so we want the same option as the power option the background color should be red and the text color should be white fine so let's copy this red color the same red color from your go to active so we want our text color to remain same and we want our pointer color to become red now let's change all these settings so here let's save all this settings over here now let's see this page in a new tab so that we can understand the changes which have taken place so click on this X button select view page okay as you can see here we have our menu so all the options are there this is particularly a page we don't have this page in the menu that's why we are not seeing the active setting but you can see all the animation all the hover effects and so on so this is how you do that okay now let's change all these sub menu settings again come back oh you now minimize this main menu and select this drop-down okay normal thing normal think we want our back the text color to be white so let's select text color and here as you can see the background color is white we don't want any background colors to select the background color that – option first is the color option and the second is the opacity or overlay option now I want to make the second option is transparent so I'll track that to the bottom now again let's go back over there and as you can see the text color has become white there is no background color and we can see a power color when we see how our when we power our menu we can see this grey color I want to change that color to the red color the see in color which we have over there okay so go to hover text color will be white background color will be the same red color fine now let's see over here as you can see the changes have taken place you can also add a box shadow if you make this on now let's scroll if you I don't know if you could see this or not there is a box shadow let me increase these the space between all this things so that you can see all everything much better so let's select this one this text go to advanced and let's add some some padding at the top so first dealing this let's add 250 pixels at the top now you can see much better so let's click on save now I hope you can see this thing much better the Box shadow there is a box shadow to these submenu you can also add it to this menu also on wherever you want okay so this was the transparent menu okay click on save go back to this page refresh ok now let's see okay looks fine better and here also it looks better okay so this is how you create a menu a transparent menu now if you see this there is also a logo over here so let's add that come back to this page now you what do you have to do how old this are to add a new column and click on this plus button so it will add a new column okay so this is also dividing this into two columns no problem press ctrl-z okay first drag this columns at the top okay so that problem won't exist now bring this particular element under this column fine as you can see over here your menu is here now increase the size of that column so that the menu fits much better okay this is looking much better now let's add our logo over here so go back drag this image under this particular column okay now you can click on over here to choose any image let's say this one click on insert media okay go to style in fact first let's change the alignment to left you can also link in fact you should link it to a custom URL and you should put your homepage URL okay so this is my home page URL let me copy and paste it over here because whenever you click on over here you expect to go to the main home page okay so make sure you don't miss this thing very important it is now go to style now you can change the size of this icon or this logo from here okay you can also increase or decrease the opacity okay to whatever you like you can add a Howard animation for example grow now whenever I hover over this logo you can see that animation okay now same options are repeated again and again if you're gonna save fine this is how it looks in on a text or but how does it look on a mobile phone let's still see that click on this text up I can now select mobile okay so this is how it looks on a mobile you have your logo here you have this thing over here now I want to change this I want my logo to be seen in the middle when someone is browsing my website on a mobile phones to select this thing select your logo okay go to content select center alignment and I also want to increase the size of my logo on mobile phone fine so this looks much better I also want to increase in fact let me do one thing let me do a very nice trick let's make the alignment right select this button this toggle bar okay and let me let's make this alignment as left okay so here is the alignment let's make it left or sorry this is toggle bar so let's make it left from here this is the mobile drop-down okay so you have to make all these changes related to this or you're under mobile drop down okay now what I will do I'll go to style I don't want the mid menu I want the drop down the toggle button so I'll select the toggle button I will increase the size as you can see the changes are taking place fine now I'll increase I will change the color okay so I want the color to be white and I want the background color to be dark gray as you can see over here the changes are taking place now what I want I want my logo my this toggle bar and over here so what I'll do I'll go to advance I'll select me I'll first d-link everything now I'll put a top margin as 30 and before 30 I'll put a minus sign okay so this brings it a lit little upper now I'll increase this to 50 so minus 50 okay so let me make it to minus 150 so it has gone more up I don't want that I want let's make 100 okay if you just have to see okay 110 looks perfect okay so when you put 110 you can see your menu is over here and your logo is over here okay so this is how it will look on a mobile phone don't focus on all these things because we are not focusing on all these things in this particular tutorial we are focusing only on the menu okay so this is how your menu will look like on a mobile phone you can increase and decrease all these spaces obviously okay fine so this is how it will look this looks amazing but don't worry your desktop changes are still the same no changes have taken place let me show you let's again search select this option let's select text off and here as you can see the changes are same okay so that was for mobile phone now let's click on save oh yes so this was very very important step now let's create the second menu very quickly this this one with a background color and so on so what I'll do let me create a new page for this so let's go to your dashboard okay Howard pages click on add new let me put any title like menu two now from template select the page builder blank click on publish click on edit with Elementor okay so it's a blank page I want to add a template I have my own templates so let me install that this is the one about page Ike if you want these templates you can see a link in the video description below and you can get all these things for free ok so this is how a page looks like a normal about ass page very beautiful this one is now I want to add a normal menu like which we'll be using in most of the website this is the one okay so first what I will do I want I want to drag my main menu over here I'll create a new section ok so I'll click on this plus button a new section will be added and I'll drag my nav menu oh you're fine so this is how it looks like now all the options are same again and again we won't be seeing that we will only see the style option because that is more important ok so a normal one we want the text color to be maybe white ok so we have the text color as white as you can see the text color is white you can change the typography pointer with and so on now what I will do I'll change the background color of this whole section so I'll select this edit section go to style background color go to color dark gray okay or maybe black and let's decrease the opacity of this black okay so this is how you can do it now let's make this also right aligned so click on this menu here is the alignment make it right aligned okay now let's see this is how this submenu looks like we don't want it like this okay so go to style select this drop down menu select the color as white and the background color as black and just decrease the opacity now let's see this okay so this looks much much better now let's change the Howard effect okay so go to content the pointer at present is the default underline so let's make it background okay because here we have the background option okay now as you can see and I want to change the color okay why because I want the negative effect your dip one color is black and the text color is white but when we hover this the background curve becomes white and the text color becomes black so that is the design which I want okay fine so let's go to style fine go to hover text color we want it black and pointer color we want it white fine now let's see as you can see over here text color becomes black and the pointer color becomes white fine now what I will do I'll increase some padding the vertical padding okay let's increase this okay this looks much better fine you can also do this same for the drop down okay for example here the drop down settings are different you can also make the same for the drop down so this is how you do it and I want to change some more settings let me show you first let's first save all the settings okay click on this X button view this page in a new tab click on View page okay so this is how our menu looks like at present if you see this when we select this there is a gap at top and bottom I don't want that gap so that what I will do I'll select this edit section button go to style now here you'll see column gap okay select no gap now when I hover this there is no gap at all fine so this is the setting which we need to do click on save now again click on menu because here as you can see the menu size is very small let's increase the size of the menu like this one go to style okay go to typography let's increase the size fine to 24 and also increase the letter spacing this looks much better okay so this really looks awesome let's also change the active setting here as you can see this page is active and here the background color is white and the text color is black so that is the setting which we want so we want the background color to be white and the pointer color to be black okay so whenever there is active page like this one this is this will be the setting click on save okay now here if you don't want to add your logo you can also add a text for that again I just add a new column okay first drag this column over here okay fine let's increase the size of this column and here again come back add your heading oh yo and whatever you want just type in oh you find so it says new year let's change this style text color to white and make sure you link this thing or to the home page very very important so select your homepage link from your and this becomes a link which is very very important guys don't forget you can also make it Center align left align whatever you like click on Save Changes now let's see how this looks on a mobile phone so select your mobile from here okay so this is how it looks I want this thing in the middle which is fine I just want to increase the size of this one okay so what I will do I will go to style I will just minimize this one I will maximize the toggle button and increase the size everything is fine I just want to increase the size I also want to increase the size of my heading of my logo whatever it is instead of logo and I want to make it center aligned okay go to style typography increase the size of this one also fine click on save let's again go to desktop this looks awesome okay so the last setting is that you whatever menu you have for example the last menu which we created or this menu you have to save this okay so how you do you just go to this section however this section click on save section you can name it anything for example menu to click on save fine now when you whenever you create a new page for example we clear this new patient okay this menu was not there so on every page you have to add a menu obviously you want your menu on every page so how you do that you click on add section and now you don't start creating a new menu just go to add template my template and select menu to click on insert and you have your menu over here okay so this is it for this tutorial I hope this tutorial was helpful for you and you learned something from this tutorial if this tutorial was helpful make sure subscribe to my channel also give a thumbs up to this video if you have any doubt any questions any queries you can leave them in the comment section below thanks a lot for watching .
★ —– Top 3 Best Hosting Providers —– ★
*** Tmd Hosting — (Use NAYYAR7 for 7% Discount)
*** SiteGround — (Get 60% OFF Link)
*** A2 Hosting — (Get 51% OFF Link)
★ Join the Gang —
★ Download Elementor Pro —
★ Complete Elementor Playlist —
☑ Watched the video!
☑ Twitter —
☑ Facebook —
★Complete Website Tutorials:★
Create the Best Website With Free Theme & Elementor —
Make a Multi Vendor eCommerce Website —
Directory & listing Website Tutorial —
Business Website Tutorial —
Make Social Network Website Like Facebook —
Build a Blog —
eCommerce Website Tutorial —
Make Amazon Affiliate Website —
Create Website with Avada Theme —
★Useful Tips & Tricks Videos for Any WordPress Website: ★
Convert WordPress Site to a Mobile App —
CSS Tips to Customize any WordPress Site —
Rank Higher in Google —
Secure Your WordPress Website —
For more tutorials like this, or to learn how to make a wordpress website feel free to visit my website. Also make sure to subscribe to my newsletter where i give away divi layouts!
Note: Some of the above links are Affiliate Links, Which Means I earn Some Commission through that Which helps me Keep Making these Free Videos for You.
#wordpress #divi # ExtraTheme #divi-theme #slider #elegantthemes #blog #blogging #website #magazine #newspaper