Sticky Vertical Menu Elementor Pro Navigation v2

in this video I'm going to show you how to create a fixed vertical navigation with elements or pro now many people watch the first version of this tutorial so here is hello I'm your host casino from casino comm I'm the digital Alchemist and today we'll take a look at how we can create a vertical fixed navigation with elements or pro now before we dive in you can do this but following this tutorial or if you're in a hurry I've added that feature to wire mentor one point 0.5 if you don't know what wire mentor is basically it's a prototyping tool for Elementor that I built I'll put a handy link in the description but if you want more info you can go to worm mentor.com ok so first let's take a look at what we're going to build as you can see we have two columns we have the content here on the right-hand side and here on the left-hand side we have our vertical navigation so why not click on the hamburger icon there you go it slides in and it slides back out now if I move on to the tablet version we have of course a regular navigation we don't want vertical navigation here and the same thing for the mobile now what do you need to complete this tutorial well I'll be using the Astra theme the free version of the theme then I'm using element or an element or pro and that's about it so here are the steps that will take to complete this tutorial first of all we create our pop-up menu then we'll take care of our header and footer and finally we'll create our single page templates with the two columns layouts so let's dive in well first of all we want to create our pop-up so go to templates pop-ups and click on add new so give it a name I'm going to call it pop-up vertical navigation 0 1 and we don't want any predefined pop-ups so first of all we're going to click on the plus and create a 1 column layout so we want to make it with a height of a minimum height of 100 VH okay next you want to click on the gear icon at the bottom left corner of the window and this is for the pop up settings that will take care of right now so let's start from the top we're going to keep it at 640 pixels here on the desktop but you may want to change this so feel free to change it to your liking we want the heights once again to be custom and we want to give it 100 vh1 our content position to be at the top and horizontally we want it aligned on the left hand side because that's where our navigation will be our vertical navigation okay next we don't want any overlay and when it comes to the entrance animation we want to slide in from the left and we want to slide out to the left now for the animation duration we want to keep it really snappy I mean I want to keep it really snappy but you may change the duration and keep iteration that you wish but I'll use that now for the HTML tag now it depends you could be using the header tag here or in the column so I'm going to use a header tag here to let search engines know that this is actually our header now let's move to the style tab we're not gonna start anything except maybe removing the box shadow but this is personal preference now for the time being I'm just going to leave it because otherwise it's white on white and you can't really see anything now close button I'm just going to change the size and give it a size of 28 to make it bigger okay and next let's move to advanced and for advanced I want to give it a 5% left margin so basically I unlink the values and gave me the 5% left margin now why 5% well that's because the column now I'm going to use for the vertical navigation is going to be 5% so if you want to use another figure if you want to use 6% or 7% make sure that it matches here and in the single page template but for the time being just you use 5% just for the left inside now when it comes to padding I'm going to unlink the values and add a 70 pixels right and 70 pixels left okay next we have custom CSS and I'm going to paste some code now this is the code it would be in the companion blog post but basically it's selector and then we have that index or is the index 10 now you may give it another value now why do I do this just because we want the pop-up to slide behind the column that will be here on the left-hand side so we're going to give that column a higher Z index or Z index but here we have in advance usually we can just input that index but it doesn't happen here in the pop-up so for that we need to use that CSS code so here it is once again so you can copy it okay let's make sure that we publish our work just to be sure we don't lose anything we still need to add a navigation itself but I like to save it as much as I can so for the conditions I want to add this on the entire website and I'm not going to add anything else so just click next next then save and close next we want to add the various elements in our pop-up navigation so the navigation itself and then I added a call-to-action button and some social icons now if you're wondering this navigation you can find it by clicking on the widgets I can here and then just type nav and this is the nav menu here ok now I've already styled it so in case you're wondering how I styled it I'm not gonna spend too much time because otherwise the video will be too long and I got plenty of tutorials showing you just how to style to the detail each and every aspect of the navigation but for the time being this is just what I'm going to use so once again I'm going to update ok now let's take care of the mobile responsive version so once again click on the gear icon at the bottom left corner of the window and we're gonna switch to tablet mode ok so this is our tablet so first of all we want to give it a width of 100 feet W because you want it full screen and as you can see there's a margin here but we are going to remove that in a moment so for the rest we want to change the the animation this time it's going to be sliding from the rights and it's gonna slide out from the right also okay general setting we don't need anything and neither do we for the start tab now for the Advanced tab so I'm just going to unlink all values and as you can see it's removed the margin okay and for the rest I'm going to keep the original padding with which was 70 pixels pixels on the left and on the right it doesn't show here but that's because it's taking it from the desktop version now if you really want to make sure you absolutely control the margins just click on that icon to end link the values and once again put 70 pixels 70 pixels left and right okay so that looks good now let's move on to the mobile version so I'm just going to click here and click on mobile and once again it took all the settings from the devices just that's just above it so it would take the settings from the tablet so he's gonna keep the slide out and slide in and slide out from from in to the right but I want to change the the padding here so I'm going to unlink the values and I'm going to give it 20 pixels on the right and 20 pixels on the left now depending on how high how tall is your navigation you may want to add some padding on the top and at the bottom also but for this example it works quite well so I'm just going to click on update okay and before we move on let's go back to the desktop version and I want to remove that box shadow so let me go back to style and I'm going to just remove this the next click on update ok another pop up menu is built and ready we need to move to the second step which is taking care of our header in footer so the idea is that we telemental pro you can create your own a header and your own footer so for that lets go to the wordpress dashboard then go to templates theme builder and here you can create a header and a footer but I've already done it so I'm just going to show you but basically you would click on add new and then you would select either header and footer and sequentially you would do it one and then the other and then you would apply it to the whole of your website now why do we do this why do we build a standard header if you want to use a vertical header well just because in tablet and mobile we're not going to use the vertical mode so we still need it and you'll understand in a moment now like I said I've already built it so let's take a look click on edit with Elementor and here it is now this is a layout from where mentor but it's pretty easy to recreate in once again of plenty of tutorials show you show you exactly how to build such navigation but it's quite simple so I just click on the plus to add a structure with two columns like that and then I styled it to have this header that you see on top so the left columns got a logo and the right hand side we have an icon so for the logo you want to click on it and make sure you add the site URL so you would click on dynamic tags and then click on site URL so that it's clickable and links back to the homepage and for the icon so we can pick any icon could be um the three Alliance and Burger icon or I just use this one here and you want to click on dynamic tags then you want to scroll down go to pop-up and now we're going to look for the pop-up that we just created in the previous step so click on the wrench icon then click on the drop down where it says all and start typing the name of the pop-up that's why it's important to me I mean my opinion to name your pop-ups correctly so here it is vertical navigation 1 and it says it's a pop-up ok so that's great any update and one last thing I want to do I'm going to select the whole section here on top go to advanced and I'm gonna going to give it a class of my - header so that's the class here now why do I do that you'll understand in a moment but basically we're going to add some CSS code so that we don't have to use a plug-in for the sticky fixed feature in my first tutorial we used a plug-in and here we're just going to copy and paste some CSS code nothing to worry about but we need to reference that section so here it goes CSS classes my - header so let's update great so let me close that and now we need to do the same with our footer so if I go back you would go to add new select footer give it a name and then you land here now something I need to also show you is that for both the header and the footer I had already created it so you didn't see you didn't get to see the conditions but let me show you the condition so it's the exactly the same thing for the header so if you click on the little arrow at the bottom left corner of the window next to update it says display condition so just click on that and initially it's like this so we need to add a condition and all you're going to do is click on add on the entire website and save and close that's all you have to do and you need to do the same thing for the header that are shown I've shown previously so that's going to replace your theme header and your theme footer and we needed to complete this tutorial now it could work with your regular theme header and footer but I cannot guarantee - at least for the sake of this tutorial just just do exactly the same thing I'm doing here on screen because I've had some people tell me oh they can complete the tutorial and the thing is when I looked at some of the steps they forgot some of the steps on make sure you follow with the same theme just be sure that you can get it working and then you can tweak it to your liking okay so next we want to click on a section same thing go to advanced and we want to add a class of my footer so my - footer now there is already a CSS ID called my footer without the dash and I also wanted to show you this to show you that this is completely different for the code we are going to use my footer is an IDE and doesn't have the - it's completely different from a CSS class called my - footer now if you don't know anything about CSS don't be confused for the time being just up my - footer okay and let me update okay so the next step now is to create our single page template and this is where some people got it wrong in the first tutorial so I'm going to show you let's go to WordPress so where you want to go you want to go to templates theme builder and you land here where we were previously with a header and the footer then you want to click on the single tab here at the top single okay and next you want to click on add new single you're going to select a page and we're going to give it a name of page template single vertical zero one or whatever you want to call it now where some people got it wrong in the first tutorial in the first version of this tutorial is that some people just created a page but this is not what we were creating we're not creating a page a page would be just the content that you add to a regular WordPress page this is the structure that's going to be shown on the page so to be crystal clear usually a page is just one block with the content and then you add all the widgets you want with Elementor and that's it here we're going to create a different layout for the page it's going to be left and right column and we're going to use the left column as the vertical navigation so basically this is not the content itself is the structure of how all the pages or any page we want is going to look but it'd be clearer in a moment so let's click on create template okay once again we don't want any predefined template and now we're going to build what you're here for so first of all we want to click on the plus and we're going to create a two column structure next we want to select a minimum height of 100 VH okay and we want to make sure if you look at content width here at the top that it's full width we don't want any column gap okay for the content position we want it to be stretched so next we want to select our column here and give it a width of 5% so we have five and our Megan automatically the second one is 95 percent okay and we're going to so with our first column selected we're gonna start styling it so let's go to the style tab click on background tab classic and we're going to give it a color you can pick any color you want I'm going to pick that one and for the moment we still see the top navigation but don't worry because in a few minutes it will be completely gone so this is our left column and this is going to be a vertical navigation and here on the right hand side we want to add the content but before we do that we want to click here on the second column go to Advanced you want to unlink the value so it gives a zero margin everywhere and we do the same for the padding because we don't want any extra content extra padding or spacing for the content okay and if you wanna if you wondering what I'm doing just take a look so we're gonna click on the widgets I can here at the top and we're going to look for post content so it's right here if you can find it just type it but it's really here at the top and we're gonna drag it here and as you can see it picks up a random piece of content that I have on the website and if you want to change it because he picks one randomly but I'm just going to click on the on the gear icon here at the bottom left corner and in previous settings I can select the page I want to use so I'm just going to use the home page then click on apply in preview and there you go this is my this is my home page now it doesn't look that good for a moment because as I said we still have that top header but don't worry for that for a moment so first of all we need to add our logo here on top and for that I'm just going to drag an image widget here and I'm going to select an image from the library so I'm going to be dad one and it's a bit too big so I'm just gonna go to the style tab and give it a with a 50% okay and next I want to add a icons so it's right here somewhere when you can't find something you can just type it okay so I'm just going to drag an icon just below the logo and I'm going to select grip grip lines and once again it's too big so I'm going to change the size okay let's make it like this and next we want to add some social icons and for that I'm just going to use and I can list widget so basically you go here to the widgets I can and I'm going to type I can list and then I'm just going to drag it here now I'm just going to remove the text actually I can remove those too it would be cleaner so I'm just going to remove the text and I'm going to select Facebook for example okay then I'm just going to duplicate this select Instagram and last but not least let's choose YouTube and actually you're watching this on YouTube probably so let's make it first okay next we want to style this so let's go to style align it in the middle go to icon and we're going to increase the size and then go back to list and we're gonna change the space between okay so for the moment once again it doesn't look that good because everything is just so close together but we're gonna change that in a moment but you can already see that there's a problem with the padding because once that top header disappears we don't want the logo to be really on top and we won't want the social icons to be at the very bottom and touching the edge so select your column then go to advanced and link the padding values and we want to give it a top padding of 30 and a bottom padding of 30 also okay so that's looking better now let's go back to our various elements so the first one is our logo we want to go back to the content tab and we want to link it to the home page because there's something people are used to so we're says link click on custom URL dynamic tags and click on site URL and now it's clickable next we want to click on the icon go to the content tab and once again where it says link you want to click on dynamic tags and we're going to click on pop-up and click on the wrench icon click where it says all and I'm going to type vertical because it's the pop-up that we created previously and now it's linked to the pop-up okay and for the social icons what you would do of course you would go to content and you would give it real links but we're not going to do that now so starting to take shape and now I'm going to select my column here go to advanced and if you recall we gave a z-index of 10 for the pop-up but we want this to be on top of the pop-up we want the pop-up to slide behind it so we're going to give it a z-index of 11 okay next let's look let's select our column sorry go back to the Layout tab in for vertical alignment we're going to select space between so now it's going to space evenly the elements but we we're still not quite there because you see this page is very long so you don't want people to scroll all the way down just to click on social icons and they can't even access the navigation without scrolling so we don't want that so this is where we're going to just copy and paste some CSS but before we do that we need to add some CSS classes just like we did for the header and the footer so with our first column selected go to advanced and where it says CSS classes we want to add my dash vertical - nav so just make sure you write that in CSS classes my - vertical - nav okay and now let's let's let's select our second go to advanced and this time we won't have my - vertical content so my - vertical content now don't worry you like I said you will find everything actually in the CSS code that you find on companion blog post ok so now we're ready to paste our CSS code and for that we want to click on the gear icon at the bottom left corner of the screen then go to advanced and this is where we're going to paste the code now the alternative would be to paste that code somewhere else most of the WordPress themes have a place where you can base CSS or write CSS code that's going to be applied globally so it's real to you but for the sake of this tutorial I'm just going to use it here so I'm just gonna make this larger so that you can see and I'm going to paste that so it looks like it's complicated in obviously if you're a coder front-end developer you're not gonna be and that's not gonna be bothering you if you never touch code you might think oh what's that but all you to do is really copy and paste it let me quickly explain I'm not gonna go into too much detail but let me quickly explain so basically this code is going to be applied when the screen size has a minimum width of 1025 pixels why did I choose that is because most tablets they would stop at 1024 pixels and here we want that code to be applied to the desktop versions that depending on your project you may want to use a different value lower or higher but once again for the sake of this tutorial this is what we're going to use so basically this code is only going to apply to 1025 pixels and above so first of all we want to make sure that the header the standard error is not displayed in desktop mode and then we want to make sure our left column is fixed now as you can see now the issue we had is not there anymore so let me select this remove it as you can see it's all gone back to being spaced too far apart so let me paste it back and now it just works fine and we can scroll and the left column is sticky actually it's fixed to be exact so the next piece of content my vertical content is just making sure there's a margin left of 5% which is the same value than the 5% of the column which is also the same value of the 5% we used for the pop-up navigation if you recall let me go back and last but not least we also want to give a margin left margin of 5% for the footer that I could have written the code just using like vertical content my vertical color in my footer in one declaration but I just wanted to make sure that if you want to change the values you realize you need to change it individually so if you want to use a column of 7% you will change 7 percent 5 to 7 percent here and 5% to 7% here also and also for the pop-up but if you want to don't want to be confused just use 5% it works great okay so now let me close this and let me publish so he's going to ask me where do you want to show where do you want to use that page template once again we're not talking about a page we're talking about the structure of a page this is the trick we use to create that vertical navigation so if you just want to use it on some pages you will just select each page by typing the name of the page so you could select the page individually or you could use all singular so if you select that it's going to use it on all pages basically on blog posts also and you should be using it on pages like the 4 for page search page and so on but if it doesn't you can still add conditions and really target precisely what where you want that page template to apply so for the time being I'm just going to select all singular but like I said you could select all pages so click on save and close okay so this is the moment of truth so let's refresh and there you go if I click it works fine let me scroll down and we have our beautiful vertical fixed navigation working great okay but now if you move to the mobile version you're going to notice something so in the mobile version we still have that left column and we don't want that and if I select so that's the iPad version if I select the phone version we have the same thing here and we don't want that we don't want that left column to appear so for that let's go back let's select our first column then go to responsive and we want to make sure that we hide it on tablet and on the mobile so let's update now let's go back refresh and voila looking good but now if we move back to the tablet version let's refresh and as you can see there's something here on the right-hand side and that's very simple if you recall so let's go back here we have that column that's 5% and this column is so let me go back 5% here so this one is approximately 95% now when we remove that column in the responsive mode what we just did it's fine but that column for the tablet it's still 95 percent and that's why you see that spacing here so what we need to do is go into tablet mode and give it 100% and just to be on the safe side we're going to do the same thing for the mobile version so 100% for both and now let's move back miss refresh and there you go so as you can see when we're in the tablets and in the mobile version we use the standard header and let me refresh desktop mode in desktop mode the same page we now have our vertical fixed navigation working beautifully so I hope that you enjoy this tutorial and I can't wait to see what you're gonna come up with now creating a prototype and that type of navigation is the first step and the next step is the branding and you're lucky because I created a brand identity guidelines that you can download on my website for free now initially it was made to work with the affinity designer software but you can make it work with illustrator with a workaround so if you're interested just go to Cocina comm phone / / ending so if you enjoyed this tutorial please give this video a thumbs up because it really helps with the algorithm and growing this channel now if you're not yet subscribed and you want more tutorials and you also want tips to grow your creative business or creative career make sure you subscribe to this channel and please smash the notification bar so that you don't miss anything so that's it for this video I hope to see you in the next one and in the meantime don't forget to invest sources [Music] [Music]

Channel: Kaycinho The Digital Alchemist

Views: 34,254

Keywords: sticky vertical menu elementor, vertical menu elementor, sticky vertical menu wordpress, vertical menu elementor pro, vertical menu, sticky vertical navbar, sticky vertical scroll, elementor menu, elementor page builder, elementor page builder tutorial, elementor pro, elementor pro tutorial, elementor tutorial, elementor vertical navigation, elementor vertical scroll, elementor wordpress, elementor wordpress tutorial, premium addons for elementor, wordpress tutorial

Id: 1yjloKtYJAM

Length: 32min 47sec (1967 seconds)

Published: Wed Jun 03 2020