Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hi Karthikeya from design school / WP algorithm in this video we'll take a look at elementor's nav menu widget it's a part of Elementor pro and it has ton of features to build cool customizable headers in addition to that you'll also see how we can tweak it using a little bit of CSS and even better you'll also build our own nav menu widgets using unlimited element so we'll build nav menu such as this one it's quite easy you don't have to write any code all you need to do is to copy and paste and we'll also build menus like this one or menu such as this one all by using Elementor and a free add-on called unlimited elements first we'll see the nav menu widget in action then we'll build our own now when you idjits without wasting any for the time let's get into today's video first let's start with the normal use case of a nav menu widget which is to build it into your header right so let's add three column layout and then we'll add now menu at the middle we'll add logo and a search bar and then I'll show you how now menu functions on various breakpoints so first dragon then Avenue widget this will be my logo and this will be my search bar let's flick the logo now let's give this column a width of 10% let this have a width of 70% and this one a width of 20% doesn't matter let's also add a background to our section I think that would do and update it once you drag in the nav menu widget the menu should be created at the back end so you can click on appearance click on menus and create a new menu already have a menu set up so it has various links just add any other link that you want can simply select the page you want or a custom link and click on add to menu and save this menu the same menu will also be reflected in elementary snap menu widget you can pick all the different menus that you create in the backend from here using the drop-down layout you can pick between horizontal vertical and drop-down so that becomes a toggle and every time user once taxes it he needs to click the toggle but usually we'll pick vertical you can align the menu you can put it you can stretch it within its column Center it or align it on to the right or even align it on to the left which is the default one pointer you can select any pointer that you want over line underline so when he hovers over the menu or you can pick a background so something like that you can also pick text so the text becomes bigger or it will shrink sync and all the different animations so based on what you pick here all the contextual options show up and this settle with none you can also change the submenu indicator again with menu if you drag an item try to right below it it becomes its submenu and the indicator for that is this you can change that from here you can pick any submenu indicator that you want and this one is really important what exactly is the mobile drop-down well I'll show you what it is so let's say if you want to break this menu at tablet which means when the width of the screen reaches 10 25 pixels this menu will turn into a hamburger icon if you break it at this width at this particular width when this a that the screen is scaled or on mobile devices the menu becomes a hamburger icon otherwise the menu stays intact so that's what it means let's pick tablet I'll click on this eye icon click on preview so you don't know how your menu or the header would look like at this particular width that we selected for our menu so you always need to click on the eye icon and click on preview and watch what happens to our header when I scaled this horizontally at one particular point it turns into a hamburger icon well this is responsive I'm not saying it's not it is responsive but it's ugly right but we can change this so even on tablet you can choose to show this menu so we'll change the breakpoint from tablet to mobile which is this we'll see how that would look right now so even at 8:46 pixels the mini looks good and we shrink it further now the menu turns into hamburger don't worry we can adjust this quite easily I'll show you how so we have fixed the tablet layout because we chose this breakpoint at 8:46 and based on the font size margin padding and a lot more settings your menu might get a little padding so your menu would become bigger and all the elements would be pushed further so you need to pick a value at which you can comfortably change this nav menu into a hamburger so such as 846 pixels for me 846 pixels is working fine so if you add any margin padding font size and all that stuff you might also consider changing the breakpoint itself in element settings so if your menu is or if your header is breaking at some point and getting ugly you can change these values in the element of settings so that that match the values at which your headers or basically any other elements of breaking so it four different pixels is fine with me well how do you solve the tablet or the mobile problem on mobile the columns are different but don't worry we can fix that I want the logo on to the left I want the nav menu toggle which is the hamburger icon and also the search toggle side-by-side on to the right side not on to the extreme right but somewhere in the middle I'm on the menu or the logo on to the extreme left we can quite comfortable you do that so you click on this click on mobile now you can see all the values that you can change for mobile devices so whichever has these icons those can be adjusted for device so I will just change this to 80% I'll change this 10% I will change this to 10% as well or let's change this to 70% this one to maybe 15% and the rest is 15% don't worry about that can also change the alignment from top to middle or bottom I think bottom is looking good for mobile you can also adjust the alignment of this search menu I will click on this logo I'll align it on to the left again this has the device's icon which means the values can be changed for device or header would look something like this but I want this toggle don't worry we'll adjust this not a big deal but we want the struggle on to the right and the search bar on to the left can we do that it can quite easily be done using CSS so you click on section let's call the column that has the nav menu called one so I'll just click on this column I will go to classes and here I'll say call – one I'll call this call – – or you can call this one call one call – – call – three the way you want now in Elementor when you click on the section and when you go to responsive there's a way to reverse all the columns but I want to specifically reverse these two columns but not the logo I think the logo should be on to the left and that's not possible using the settings that they gave here you can do it in another way so you can create another nav menu column that's not shown on that's basically hidden on desktop and tablet and you can show that on mobile so that way you can position that particular toggle on to the right of this one but that will add another additional element and you don't want that there's an easier way to do this so click on this in the class 4 it is called 1 and the break point for it or the width at which this is being shown is 846 pixels or the tablet break point so you just go to this section go to custom CSS first at the break point condition I've already explained break points so you say at the read media only screen some regular devices and then you specify the condition max width and this max width should be the mobile break point which is 846 pixels which is also the width at which this turns into a toggle so the moment it turns into a toggle will position it on to the right how do you do that well you first target the column that has this particular nav menu and Elementor works based on a CSS framework called flexbox it's quite simple it's similar to CSS grid it was there before grid it's universally supported so Elementor works based on the flexbox framework and it's supported by all major browsers and in order to change this similar to z-index there is something called a property called order so order will set the way in which the element should be rendered so if we give this column a higher order than this one this will be shown after this one that's what we're going to do so since I called this call one I will just say order and say three and just like that with a single line of CSS code the toggle is pushed on to the right without us having to do anything else so you just get the breakpoint or the width at which this particular menu appears and we just put this if you have multiple columns you can give them relative numbers so whichever number is higher will be pushed on to the right the lower number order will be pushed on to the left since we specified three for this and usually it would be zero or one for default values so this is three and that's why the hamburger is pushed on to the right since this is 70% you can also change this to 10% and even this one row 10% just to bring these two together and another 10% would be normal gap so that way you customize the mobile view of your menu and made it responsive I will click on update let's see our header in action again even my preview is updated and just like that on mobile we get our neat little hamburger icon let's customize all the items from within the Elementor interface so I'll click on nav menu I'll go back to desktop I will click on menu mobile drop down and say full width I'll align it on to the center and you can also change the styling of each elements so you can change text color so this is the text color and just keep it at the default in change our state horizontal padding vertical padding and remember if you add these values again the menu might get pushed on to the bottom and you need to choose a break point so that the ugly menu overflow doesn't occur since I've left all the settings default I didn't add any padding's or spaces the menu is fine in all three views and then within drop-down you choose text color typography and all that stuff and also change the toggle button which is the hamburger icon so you can change the color and background color background color I have completely made it transparent and you can change it the way you want so that's how you use elementor's nav menu widget and also tweak it a bit make it appear right next to the search toggle using simple CSS all you need to do is to click on the section that has these columns specify your media query or a custom break point in other words specify the max width at which the hamburger appears which is 846 pixels in my case if you've tweaked the custom break point default values you'd want to add that value here and change the order of this column just give it a higher number and it will automatically push to right next to the table and that's how it works it's quite simple so that's element or nav menu in a nutshell well that's not it you can build your own nav menu using a free plug-in called unlimited elements I've already explained some of the videos on this now let's build nav menus using unlimited elements by taking code from code pen and making it an element or menu also before leaving and creating our own widgets I just want to click the snap menu forgot to show you that so mobile drop down is the same as the hamburger icon and this is a normal menu on desktop and the mobile drop down is the hamburger icon on all the settings affect the items within hamburger icon we chose 846 pixels and we want the drop down menu so when we click on the hamburger icon we want the width to be full width so if you skip this you can see what happens it just inherits the width of the column which is not nice so you obviously want full width for the hamburger menu in mobile view and also you can choose to align elements aside or onto the center as you can see here you can also choose the hamburger icon so let's pick hamburger itself can also learn the toggle on to the left right within the column since we've had a column of five percent weight it doesn't matter much if you have a bigger column for this hamburger it will be aligned on to the right you can also change the colors of the toggles so with then drop down whatever colors you add that will also be the colors of items any click on hamburger menu and toggle button you can choose all sorts of stuff and that's how we tweaked our elemental header made it responsive and also pushed this particular column on to the right when the mobile breakpoint is reached that's a pretty neat stuff don't worry I'll leave this code in the description I'll also leave a link to CSS breakpoints what's that it's really important I think Elementor is going to add more breakpoints in future versions but till then you need to write breakpoints on your own click on the section go to advanced custom CSS add breakpoint condition it's the one highlighted in green within that you can put any CSS code so when the view reaches this width you can put any CSS code we just wanted to align this on to the right that's what we did okay now that we've built our own menu let's go ahead and actually build it right from the scratch using unlimited elements and on so go to WordPress repository and install and activate unlimited an element's add-on in the wordpress dashboard click on unlimited elements click on widgets for element also if you're new to unlimited elements of made-up video explaining the basics of unlimited elements you can also watch build your playlist in which we built a couple of widgets just by using unlimited elements and code from code pin or anywhere on internet I'll click on widget for elemental I'll pick a category so this is the collection that I created and just click on add widget this is how you create widget it's available with the free version of unlimited elements but they have ton of widgets built for you if you have the pro version link to that will be in the description too so the first menu that we'll build is this one all we need is to take this code put it in our unlimited elements widget creator and then change it into a functional nav menu I've taken a page elemental canvas page I change the layout to canvas I will be showing all the menus here so that you'll clearly understand how all the different menus function since it's an element a widget you can drag it into header or if you build a really cool menu you can let it be on its own similar to this one so this one I will take the HTML let's call this menu my new menu one widget name will be autofill based on water type here I will click on add widget I will double click this my new menu one I will click on HTML will delete this dummy text I will take HTML from here also you need basic understanding of HTML and CSS to use this but if you know how to use it it's really powerful we can comfortably remove this section who don't need it since this is a widget it will automatically be within a section in element I've removed this section from the top and bottom so I'll have removed this line and the last line which is not necessary I will click on CSS I will take CSS from here since I've removed the section called stage I don't need its CSS and in CSS from here I'll copy this go to the widgets CSS and let's put CSS so click on update and it's updated let's preview our widget you can hold down command and click on preview it'll open up the preview in the new page and just like that we made a nav menu but the links are not functional yet don't worry about that we'll change that so how do you put links in the nav menu I made a video on creating your own elemental buttons by taking any code any button code from code pin and converting it into a functional element a button go check that out it's really helpful it will help you understand how to create your own widgets also that link will be in the description I will try to leave as many links as possible also you check out the channel for creative elemental buttons so here we need to replace the static text with an winter button right we need to make this home button a link whose attributes can be adjusted using front-end so a link has this structure so you remove link and in place of that you add an actual HTML link structure and this is the attribute of the link or the title of the menu item and within the first tag you say a href have explained this in the element of buttons tutorial and within H ref can create an attribute link attribute for this and we can get that from the front-end attributes are away to get dynamic input from users so click on add attribute click on link let's call it menu one link default value should be hash will click on add attribute and between these double quotes I will click and highlight the cursor and now I can click on menu one link so this link can be adjusted using front-end I'll show you that in a bit similarly you can do the rest for the rest of the items so you can replace about with this particular link structure so a href and then leave blank space create another attribute and call it linked to all all to show that in a bed link has this regular HTML structure so first you delete the text put the link structure any read any text here and you say it's ref so every static text should be replaced with this particular pattern which is the pattern for HTML links right even your element of buttons have this pattern so a href double quotes and then this is the static text for a menu item you can also create an attribute for this I will go to attribute again I will create another attribute which is a menu menu to link I'll say menu to link again the default value let's give it hash you go to HTML and we'll highlight the double quotes with an H ref click on link attribute I'll update this now I will refresh this page and once you create the widget in widget creator tutorial can click on update or create and those will be available within your elemental interface so this is the menu that we created just like that we have all the links and you can see we've created a couple of attributes these are basically the links that should be opened and we click on this home mine or whatever galleries so I will add a link this to my home page just this one WP freedom com similarly you can do all the custom attributes stuff and like stuff like that I'll update it I will click on preview changes now this is my menu when I click on home I'm taken to the link attribute which is my home page so that's how it functions similarly you can add attributes to other items and this is a cool nav menu and if you want this rigid to have padding it's still an element of widget click on the widget itself go to advanced add a margin of maybe 50 pixels now you see the blue border expand you can adjust this per device you can also add padding to the device which are 30 pixels padding you can see that in action you can also change the background that has this menu background of the section that has this menu so let's go with a darker background so something like that so we just created our custom menu the first nav menu just by using the code from code pen you can just google them there are a lot of them or you can go to free front-end dot-com there are a ton of CSS menus all these can be made as elemental menus and some of them involve CSS some of them have JavaScript so the second menu that I want to show you is this one so when you click on it this is the animation that it shows let's go ahead and build this menu it also has JavaScript you know to tweak JavaScript if you know basic knowledge of JavaScript anyway we've build our first widget we're happy with it we'll go back to our widgets list let's duplicate this so that we can add another section or another widget right next to here and go here again I will click on add widget I will call it menu 2 style or whatever you want just give it a unique name click on add widget and once it's added you can either click on this pencil icon or double click this to open up the widget for editing go to HTML remove the dummy HTML go to the code pen that you want so this is the core pen that we are trying to this copy HTML from here I'll paste the HTML don't worry about the horrible code and stuff like that I will explain what it is it's nothing but section these are a lot of menus we just want a single menu so we'll remove all these as you can see nav is just like a section and within the section they have different menus you can see that here so they have different menus in this demo we just want one menu so we can just copy one nav from here and we need to carefully understand what is the CSS associated with that particular nav and paste all that CSS into this widget CSS I call this HTML CSS mapping so if you understand the HTML structure and if you know which CSS code to copy in this well you can particularly or virtually build any widget that you want from the code using internet or code pen or whatever source you want right so this is the second thing and it has a class of underlined so we need to pick CSS that has underlined you also need to pick CSS that contains links again if you have a link it's better to add a class name to general HTML element and replace the link name with the class name I have also shown this in number of unlimited elements videos watch build your elements or build your website's playlist I have explained how to do that on lot of videos so we just need to copy every CSS code that has underlined and that is associated with links so starting with now underlined the length child till here this is the code that's associated with the first particular set of the nav menu so I'll just copy this and click on update it's updated again let's preview our widget let's save of what we've done is don't worry if it doesn't work there's nothing to lose we've missed some of the CSS here so let's go ahead and find out what it is oh we've missed the JavaScript from here so let's copy the whole JavaScript it's pure JavaScript it's not any library again if it's not pure CSIS click on this and click on View compelled CSIS the same with HTML I've already done that so it's showing me the compiled HTML CSS and JavaScript that I can directly copy into my which is created so JavaScript I'll take it I will go to JavaScript here paste it update now let's preview our video I've dragged this widget into the page that I created earlier I removed that widget and put this nav menu widget as you can see here it doesn't have any attributes because we didn't create any it still doesn't seem to work it looks like a regular menu even after copying JavaScript so we need to carefully see what we've missed so we've copied everything from here till here why didn't we copy this it's because it belongs to another header or another nav menu as you can see here so the first nav menu is what we're trying to achieve and we don't need this code we've also copied JavaScript turns out I just missed this part of code which defines attributes such as underline height and transition duration that were used so I will copy this code I'll do one thing have updated this page I will click on preview changes so every time we update our menu we can simply refresh the preview page to see the hover effects in action well paste the remaining code so the root and all the nav that is required to function we also have JavaScript it has a neat little function and how does it trigger so on click so when you click on a link it's performing this function which is basically responsible for that underlined I'll update this I'll update this page so even the preview will be updated now now we get the link and when we click on it we get that neat little underlining animation now this menu is within a section that as an art background you can remove that you can make the transparent or put this in your header the way you wanted so just like that we have our menu here but there's a problem with this when you add a link attribute to this when you click on it it'll not have been quickly be taken to that page and you won't be able to see that animation so how do you change that so in JavaScript if it look closely it says on click but there's another event that can be triggered which is onmouseover so when you hover over this particular item that particular function can be triggered I'll do that for just one link and you can see what it does well say onmouseover and it's calling a function UL which is essentially the JavaScript function so onmouseover anyhow or the home page it will perform the animation now I will refresh this one and also this one I will click on this now when I hover over the home page you can see that the underline is under this home we didn't change the remaining attributes for this so when you change all on clicks to onmouseover you will have a hover based animated menu we'll also add links don't worry so we'll change on click to onmouseover you can take this in atom text editor or something and then do the same update it update the space and also its preview now when I hover over the menu item the underlining animation is performed that's cool we need proper link attributes this is already a link you can change the text within so change videos to anything else that you want so static text we also want to add an attribute here so we'll say href again double quotes updated go to attribute I'll say link 1 so attribute type is basically a link I'll say link 1 default value in hash add attribute go to HTML and within each raphaël click on the cursor click on link 1 update you can do the same you can add attribute of H ref to every link let's create another attribute for the second link click on add it's linked I'll call it linked to default value B hash click on add attribute go to HTML again with an instead of L click and highlight the cursor and I'll click on link to can also change the text or create an attribute for text as well but you'll just build your menu ones you won't be updating on articular basis so I'm happy with what I have I will refresh this page and also its preview now when you hover over these two items or all the items the animation is performed and they also have attributes right next to them so I will click on this and you can see link 1 and Link 2 so I'll say apple.com we'll see if our links working so when I click on home should open Apple comm which it does or forgot to add HTTP now to work don't worry about that I'll just reload the preview of the page again and click on home now it takes me to Apple comm if you make the preview link based or click based you won't be see able to see this animation because the moment you click the element it's taken to that particular page so let's change or keep the animation to power based create attributes for the rest of the items and that's how it works we've also made the second menu now the last menu similarly you can achieve other menus by copying their respective classes or if you want the second menu you want everything with black underline and link based CSS or this black underline I think this is the only thing that you need this one this one snippet the whole underline and now snippet so till here is the code that you need to copy in CSS for the second one and also don't forget the root because it won't perform that action so this is our second nav menu I will wrap it up with the third one which is this so when you click on it it will open up a hamburger icon and it will show all the menus or items and the color base let's go ahead and create this so I'll create another widget I will go back I will call it style 3 widget I'll just wrap it up quickly we can add widget will be adding the widget to the same page I will delete I will reload the page once the widget is created go style 3 Navman I will double click this so it's this one so we need the whole thing whole CSS code here except body and other elements that change normally so we'll take code from SVG also replaced general elements with classes and replace the elements in CSS with dot class name have shown that in unlimited elements creative buttons tutorial so till the end we need to copy all the CSS copy all the CSS from SVG till the end and go to edit CSS I'll paste that first I'll update it I will go to HTML will copy the whole HTML copy it again you need to click on this and show view compiled CSS again I'll remove the dummy HTML I'll put the HTML updated and there's no JavaScript to add here and for body they have given a linear gradient so we'll paste this gradient into our section that has this I will go to section and custom CSS it's a selector I will paste the code allowed to give min hi to our section so that we can see the nav menu in action I'll just say height min height let's change it to 600 pixels I'll update this now let's preview our third nav menu widget if it's functioning properly or let's actually refresh this page and drag it into this particular page so that we can see it in action rolled on this one so here's my nav and those are my menu item and they seem to work perfectly fine all we need to do is again change the items we'll go to widgets list so we need to add attributes for items again again home they have they already have a href just replace these with link attributes for each items change the text to the text that you want that's it it's that simple create a link attribute replace this hash with the link one attribute linked to attribute link three link four and so on and replace this with the text that you want I will just do it for this one I will say my menu and I will create a link attribute for it whose link from here you need to do for all the items in the menu link item attribute alcohol it I will give it a default value of hash pseudo HTML again so I will replace there with link item at updated I'll also update this page and refresh it again because the widget itself needs to be updated now my menu is a link and we can give an attribute for that link or let's link it or home page or a sample page or whatever page you want I will click on preview and when I click on my menu I am taken to my home page just like that and this is the menu in action you can tweak CSS properties to change the space between the toggle and other item can also change the text and create attributes for link attributes for each of them and just like that we build three widgets or three Net nav menu widget using unlimited elements go to free front end com they have ton of nav menu items I'll probably make another video showing you how to create your own menus because these are just endless and I think element of navien image it is a bit limited in its functionality so you can get nav menu such as this one can see there are a lot of nav menus try putting them some of them are easy some of them are hard you need to follow them and can have nav menu such as this one all perspective based and stuff like that and even this nav menu you can build it just watch out properly for CSS for HTML and any JavaScript that you need to add or modify based on that particular page he has classes need to be unique HTML you need to add just a little bit of HTML if it's required and so on so that's it for now that's how you tweak elementor's nav menu widget or build your own and have menus using unlimited elements addon I'll make a video on unlimited elements custom header using custom nav menu will build more complex nav menu there's even a nav menu in the pro version of unlimited elements I will show that I'll show you how powerful that is links to everything that I talked about in this video will be in the description that's it for now hope you guys enjoyed it I'll talk to you in the next one till then keep watching element base explain a lot of playlists on the channel you .

Video Discription

Learn about Elementor nav menu, build responsive headers, reverse columns, tweak mobile menus, build your own custom navigation menu using Unlimited elements add-on for Elementor.

Get Unlimited elements Pro:

[ Enter "designschool2019" for a 20% discount]

Get Elementor Pro:

Elementor css custom breakpoints:

Source code used in the video:

Unlimited elements widget creator videos:

CSS code in the video:
/*Breakpoint condition for mobile*/
@media only screen and (max-width: 846px) {
.col-1{
order:3;
}
}
/*End of the code*/

Elementor basics playlist:

If you're new to Elementor, learn the basics here:

Join our Facebook Group:

Design your website:

Build your website:

Customise your website:

 

InterServer Web Hosting and VPS

Leave a Reply