Σ 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 there I hope you will release today in elements or pro 1.8 is a brand new mobile responsive navigation menu widget it's a very much requested feature I've had a chance to play with it and it's fantastic so in this tutorial I'm going to show you how to use the new elements or nav menu widget let's check it out there are lots of cases where it's great to be able to build your own custom responsive menus on with this new widget the sky's the limit both in terms of design control and in terms of where you can place your menus and as the designer that's the dream right now of course the widget isn't limited only to main navigation menus either can be used for any menu or list of links that you can think of anywhere on your site within content within sidebars with in footers horizontal menus vertical menus even menus that are always at mobile hamburger icon even on large screens as the nav menu widget is an element or pro future I'll assume you have elements or pro throughout this tutorial if you don't have Pro there's a link below this video that will take you right there to check it out and that link is an affiliate link so if you buy pro after clicking it I get a commission so by all means feel free to bypass me and go straight to elements or comm slash pro right let's dig into how to use the new nav menu widget if you saw my custom header tutorial a few months ago you might recognize this custom header I created now now that we can use a native element or widget for the navigation I thought it'd be nice to take up where we left off so here I'm just editing a template in my element or template library which is using the element or canvas template just a simple one column section with a brown background then I dragged in a columns widget for these three columns social icons widget here an icon list widget here and an image widget here now I want my nav menu to run horizontally full width under the header with a slightly darker background color than the main header area so I'll add news section choose one column now in the section style tab I'll choose a dark brown for the background which fills the entire width now we come up to our widget choose a menu here down to the pro elements and here's the new nav menu widget so we'll just drag it in the widget is pulling in my primary menu which I've created in WordPress already in appearance menus so I just created a new menu gave it a name and then dragged in the pages from this list of pages into the menu and then saved it and this is how you create menus in WordPress anyway standard stuff notice I've also indented some pages so we have a sub nav of a few pages under products okay back to the editor now this yellowy link color is automatically coming from my themes customizer Styles it's the color that I've got set for links I personally have element tours global colors turned off in elements or settings which lets my themes colors shine through in the widget settings we've got three tabs content style and advanced now first it looks like Elementor pro sets the nav menu links to be 13 pixels size by default at the moment which is a bit too small for this design so before anything else I will quickly come to style now notice here we can style the main menu the drop-down and the mobile menu toggle icon I'll focus on the main menu now so back to main menu turn the typography on and that will allow me to bump the font size up to 16 pixels while we're here let's also go uppercase and font weight 600 I'll come back to the style tab in a moment tweak colors etc but first let's let's see what we have under the content tab so layout we have horizontal vertical or drop-down now I actually want horizontal for this menu but vertical would be great for footer menus or menus in sidebars or you know even down the left side of the page is the main navigation and drop down genius now this gives you the option of a mobile menu at all screen sizes so that's perfect if you don't have much space for a menu you can just have the mobile menu for for everything I'll switch that back to horizontal align just left center right or even stretch which evenly stretches the menu items out but I'll go with Center for this just means the style that you see when you hover over the links and this works in conjunction with the animation settings here so each pointer has its own set set of animations appropriate to each pointer it's a little hard to see right now with the default colors I'll fix that soon and also the blue frame of the widgets in the way a bit but apart from opting to have no pointer at all you have underline which by default it just fades in book you've got other app animation options like slide there's over line now over line place is aligned at the top instead that has the same set of animations is underlined you've got double line which is a line at the top and the bottom you have framed now framed is a box around the links and friend has its own unique set of animations such as draw by ground with background the pointer covers the whole background so and background has a whole load of interesting animations available and then there's text now why text you would think that that might be the same as no pointer effect that's all but actually no because text has its own list of animations I grow shrink sink float skew rotate and there's lots of fun to be have with those which I'll I'll leave to you I'm going to go with background for this site with the default fade animation fix the colors in the style tab in a moment submenu indicator we have four options here I quite like the Chevron and then studying layout under the mobile drop-down so here you can set the screen width breakpoint that will drop to the mobile menu icon instead of the standard menu of course if we chose the drop-down layout back up here then these options just disappear so with tablet selected as a breakpoint I'll switch to tablet preview mode and there's a mobile menu but now let's change the breakpoint to mobile so now we still have our standard menu a tablet size so we now have to flick to the mobile preview to see the mobile menu now these breakpoints are set in accordance with elementor's standard breakpoints that it has four columns and everything else so I'll come back to tablet mode which breakpoint by its a tablet just partly because it's easier to see what's happening in this video and the full width setting is superb if you notice with it off if I click the menu icon then the menu only stretches as far as the column that it's in but if I switch full width on then you get a true completely full width menu now this is especially great if your normal menu doesn't go full width I'll just quickly flick over to this very quick mock-up I made but the mobile version of you menu can still be full width even though your menu didn't stretch for width but with a line you can set whether the mobile menu links are over to the left or centered you noticed by the way that our pointer on mobile is now a background hover so it's very clear and obvious feedback on smaller touchscreens toggle allows you to set what the toggle icon is right now you have a choice of either none or burger which is the hamburger icon I think and so you can turn the menu off on mobile completely if you want to we can style the icon further in the style tab soon so we're not stuck with this collar or size and toggle align simply lets you place the toggle icon where you want it now it makes sense centered for this but if I come over to my alternative design again flick to tablet mode I'd likely want to right align my toggle icon now note that the toggle appears wherever you place the normal menu you can't yet place it somewhere else maybe there'll be a future feature Oh back to our Edit screen and back to desktop view okay that's layout sorted so time to preview now that's not bad so far so let's tweak a bit further now we'll come over to the style tab and remember here we can style the main menu the drop-down for sub nav menu z' and the mobile toggle icon so it may menu first to the menu item we can set text color for normal hover and active stays and normal I'm happy to leave but you could set a color here that's different to your default links color hover I'd like to set my pointer color and remember up my pointer is background I'd like set that to the same yellow as my text and then set the text to be the same color as the background so we just get a reversed our fate active is the color each menu item will be if it's the current page so if we're on the history page we can set how the history link will be highlighted as the current item I'm going to leave these alone they default to the hover settings which is what I'm going to leave these on and I'm happy for those to be highlighted like this agra fee are turned on earlier so all this right down to letter spacing is from typography horizontal padding is the amount of space inside each menu item so if I set out to zero wash okay now it's easy to see if I hover there's no horizontal padding inside each item at all now I actually quite like the default book let's go for 16 pixels vertical padding is the same but vertically so set that to zero then hover there's no space above or below so I'll make that something like 13 that's better a space between is the amount of space between each item not inside so if I set that to zero well actually nothing happens so the space between each items so far is actually just created by the horizontal padding inside so if I set this to a bigger number like 50 now you can see each item is 50 pixels apart as well as the horizontal padding inside each item I'm quite happy for the only space to be the padding inside so I'm just going to set that to zero and border radius is just nice rounded corners for the pointer if you want them now notice each one of these controls also allows you to have a different setting for desktop and tablet but not mobile because it's assumed that you won't see your standard menu at mobile size anyway right I'll collapse the main menu and quickly look at the drop-down options so I've got a drop-down submenu here be aware that the Styles you set for the submenu drop downs like this also affect your mobile menu – it's actually the same controls so I'll have the same background color as the section background and I'll choose yellow text drop down now on hover I don't want the default gray so let's go with a nice rich yellow background and our dark brown text go to turn typography on now it seems at the moment and whether by design or a book that the typography settings don't affect the drop-down menu on desktop it just takes a typography that you set for the parent menu but I do want access to the responsive controls here to set the styles for the mobile menu drop-down in a moment so I'll leave typography on just go past typography I'll leave these padding settings at the default they look good to me but you can tweak those like you come for the main menu he can set a divided between each item if you like so I could set solid a lighter color with one and then let's make this collar a bit more transparent to blend in and that's not bad I mean actually I'd prefer it with no divider so I'll just set border type back to none distance is how far the drop down menu is away from the main menu so bad default it's right next to it but I'll drag this slider all the way to the top to 100 then hover so that's 100 pixels from the top and you can go negative to pulling it up I'm just going to delete that anyway because I'm happy with that now I did say that the drop down settings affect the mobile drop down too so let's just change to tablet preview mode I prefer a couple of tweaks so back to typography and I'll choose uppercase for the font way I'll go 600 and size maybe 15 all right so that's main menu and drop-down styles finally to the toggle the icon is already yellow because I chose my drop-down text to be yellow you can override that here so I'll go with his paler beige color ground on it if you like so I can add a yellow background clear that because I'm happy with it as it is hover now let's make it yellow I'd like it a bit more noticeable so I'll want the size up to 30 ball the width allows you to have a border and border-radius he set rounded corners for either your border or your background so I could come back to normal I could add a yellow a background color and then increase the border radius a bit I could even set the border radius to be 50% and then we have a circle and I could increase the border width to add a border around it among all sorts of possibilities but let's just say that now so back to desktop and preview nice Avila will hover too bad I would prefer these menu items to actually fill the section so the gaps at the top and the bottom are actually coming from my column gap settings for this sections column so just to get rid of that I'll edit the section and then over here in the settings I'll set columns gap to no gap preview that again not bad so now we just need a bit more vertical padding inside each item so back to our widget settings in style right down to vertical padding I'll try 18 preview that again yeah on us a lot better so that's the new nav menu widget in element or pro so just one idea for a use for this I mean how about creating two menus so you could create two menus call them primary left and primary writes then you could place one on the left side of the logo and one on the right and as I've mentioned you can create vertical menus in your content sidebars footers there are all sorts of possibilities really great stuff if you found this video useful subscribe to my youtube channel to be informed when i've got new tutorials out please like the video and drop me a comment below now my email subscribers get all my best stuff access to exclusive offers and courses and things like that so to be in on that go to my website design build web co slash my best stuff sign up and I'll keep you informed thanks very much .

Video Discription

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:
(affiliate link)

 

Leave a Reply