Sticky Vertical Menu Elementor Pro

in this video i'm gonna show you how to create a beautiful transparent sticky vertical menu that opens a full screen navigation and we'll do all of this with elementor pro and with no additional plugin hello i'm your host casino from casino.com i'm the digital alchemist and today i'm going to show you how to create this beautiful sticky vertical menu that opens a full screen navigation and as you can see whether it's a horizontally scrolling website or just a regular vertical scrolling website the result is going to be the same it's going to be gorgeous and we have the sticky vertical navigation here once again now when we go into tablet mode i'm using the same navigation so still using the vertical navigation but when it comes to the mobile i decided to use just a regular navigation because i didn't want to waste any space for the content on the left hand side so for removal it's a regular navigation but once again when you click on the navigant this is what happens so the same sliding menu that we get in tablet mode only this time it's a regular top header okay now that we know what we're going to build let's get started okay next let's look at what i've been using to create this project so i'm using the astra theme the free version so you may as well install it if you want to follow along and then in terms of plugins i'm using elementor and elementor pro and if you're serious about web design and you don't have elementor pro yet you'll find a handy link in the description below now the only reason why i recommend elementor pro is because i absolutely love it and recommend it all the time and it gives a little kickback if you purchased through my link and that my friend allows me to keep on creating free content just for you okay next we need to take care of our footer and our header and let me show you why so if i go into the front end this is a page without any content and here on top you see the default header from the theme and just below you see the default footer from the theme now when it comes to the header for the tablet and the desktop version we want this to be transparent we don't want any sub header we only want a top header for the mobile version but all in all we're going to use elementor pro for that now when it comes to the footer we also want to use elementor pro now if you use a standard vertical scrolling website you can change this to anything you want or you can leave the default footer from the theme now i want to create a horizontally scrolling website and a little bit more about that later in the video but basically because i want to use a horizontally scrolling website i don't need any footer so what i'm going to do is to create a new folder with elementor pro and just make it empty so for that i want to go to templates theme builder then make sure you click on the footer tab and next you want to click on add new footer so i'm going to call mine new footer very original i know and click on create template okay so we don't want any of that so let me close this and all i'm going to do is just click on publish i'm not going to add any content at a condition we want to include this on the entire website click on save and close okay and now let's go back to the front end and now let me refresh and boom my footer is gone now once again if you want a standard footer you can just style it here the way you do with any content in elementor pro okay next we want to take care of our header and once again we want to go to template theme builder then make sure you click on the header tab and next you want to click on add new header and i'm going to call it new header then click on create template okay once again we don't want any of that so let me close this so first of all you want to click on the plus sign and we're going to pick a structure with two columns okay and before we go any further we want to change the responsive mode so click on the responsive icon at the bottom left corner of the screen and we're going to go straight into mobile mode because this is what we'll be using the top header for okay with our section selected now we can go into the layout tab we want to make the content with full width we want the height to be a minimum height of 50 pixels we want the column position to be in the middle and the html tag should be header okay next you want to click on the style tab and we want to change the background type into a classic background type and select the black color now this is only temporary because we'll make it transparent at the end but for the time being we want to be able to see what we are working on okay so let's close this and now we want to click on the advanced tab and we want to unlink the margin value so i'm just going to click on the icon to unlink the values you want zero on top and we want minus 93 at the bottom so i just type 93 go at the beginning and type the minus sign so we also want to unlink the padding values and then it's going to be 25 pixels on top 20 on the right 15 at the bottom and 20 on the left hand side okay next i want to select my first column so i click on the column icon i want to make it a width of 50 and i'm going to do the same thing for the second column okay next i want to make sure i select my first column once again and then where it says vertical align i want this to be aligned in the middle next i'm going to click on advanced and then i just want to make the padding 0 all around now let's do the same thing for the second column so let me select my second column and once again where it says vertical align i want to align it in the middle then i want to go to advanced and make it a padding of zero pixels all around okay next we want to add our content so i'm gonna click on the widgets icon then i'm going to look for image and i'm just going to drag it in the first column and then i'm going to pick an image in my media library so i'm going to pick the logo i want this to be aligned on the left hand side okay next where it says link you want to select custom url in the drop-down and then you want to click on the dynamic tags icon and you want to select site url so that when you click on the logo it goes back to the home page okay next you want to click on the style tab and then where it says width you want to select pixels and type 35 pixels now of course it depends on your logo but in my case it was 35 pixels okay next we want to add an icon for the hamburger icon so once again just click on the widgets icon and then i'm just going to type icon and i'm just going to drag it in the second column so first of all i want to click on the icon itself and i'm going to look for grip like this grip line so i'm going to pick this one now we'll need to come back to this later because here where it says link we want to come back to this later and actually link that icon to the pop-up we're going to create but we haven't created that pop-up yet so we'll need to come back to this later so next we want to align the icon on the right-hand side next click on the style tab you want to change the color to white or any color that you wish and next where it says size we want to make it a size of 30. so next i want to select my section by clicking on the six dots here or here in the navigator i just click on section and by the way if you don't know how to open this it's pretty easy you have an icon here at the bottom left corner of the window and you can just toggle it on and off or you can use command and i on a mac or i guess control ni on the pc okay so with our section selected you want to go to the style tab and then you want to go to border and where it says border type you want to select solid then you want to unlink the values and you want to select a bottom border of one pixel and where it says color you want to change the color to any color you want but the one i'm going to use is this one e7e0 e0 still in the style tab you want to click on the background sub tab and we want to change the color to a transparent color so i'm just going to drag the opacity all the way down okay and before we publish we want to click on the advanced tab and then we want to go to responsive and where it says visibility you want to make sure that you hide it on desktop and on the tablet now in order to be sure that our header is visible where it says z index you want to type 999 with that said we want to click on the publish button and we want to add a condition so by default it says include on the entire website which is what we want so we're just going to click on save and close good and now we can move on to the next step okay next we need to create our menu so for that you want to go to appearance menus so as you can see i've already created my menu but it's very simple just click on create a new menu and then just type the name of your menu could be something like my new menu very original i know then click on create menu and once you've done that you can now add pages here on the left hand side and add it to the menu and then make sure you save it at the end now i've already done it so you can see here i got my pages already added then i take the option primary menu and then click on save menu okay next let's create our content shall we so in wordpress you want to go to pages add new and we're going to give it a name so i'm going to call it my page very original once again and because i'm using astra i'm going to click on disable title and then i'm just going to click on publish twice and now i can click on edit with elementor so for this tutorial at the bare minimum you should have one full screen hero section so for that you want to click on the plus sign then you can pick one column or several columns and with the section selected where it says content with you want to make it full width then for the height you want to make it a minimum height of 100 vh and then we can go to style we can change the background color a little bit okay and then we can drag a heading i'm just going to type content so don't worry about the styling for this this is just to simulate the content i'm just going to change the style and the color and then once i'm happy i'm just going to click on update now of course in this tutorial i want to style it to the way i want what you've seen at the beginning of this video and initially the design i'm going to show you came from a previous tutorial where i recreated a site of the day from the awards website which is what you see here on screen so let's give credits where it's due for this beautiful design so i started from a blank canvas and then it went a little something like this [Music] and then i created the fake whiskey brand and then i changed the visuals to match the new brand and it went a little something like this [Music] so as you can see it looks really good and for this tutorial i've only swapped a couple of images around now let me scroll and let me show you you need to take into consideration that once we're done with this tutorial there will be a left sticky vertical navigation so you may want to push the content on the right hand side and there are a few ways we could do this so the first way is that we could just edit the general page template with elementor pro but in this case it wouldn't really make sense because let me show you in the front end so here in this first screen of course we want to push the content on the right hand side otherwise the first letter would touch the border here and we don't want that now when it comes to the second screen here we don't want to shift we don't want to push the content on the right-hand side just because everything is centered and it looks good like this same thing for the third for the fourth and so on but if you really want to use that technique i've already covered that in a few tutorials now the other way we could do this is actually on a section per section basis so let me go here on top and here let's say i want to shift the content then let me show you if i just select the first column and go to advanced as you can see i can change the padding just for this section and that makes more sense in my opinion for this tutorial okay now that we have our content ready we can move on to the next step okay next we want to go to templates pop-ups and then you want to click on add new pop-up i'm just going to call it popup vertical then click on create template okay so we don't want any of this so let me close this click on the plus sign and we want to select one column and we'll take care of this later so first of all you want to click on the settings icon so it's the gear icon at the bottom left corner and now we can start editing the values so where it says width you want to select 80 pixels for the width the height should be fit to content now for the position horizontally you want to align it on the left and vertically you want to align it in the middle next where it says overlay you want to switch it off and the same thing for the close button next you want to click on the style tab and you want to select the background type classic and where it says color you want to open the color and just pick any color and make it transparent so all the way to the left next you want to click on the advanced tab and where it says prevent closing on overlay you want to turn it on and same thing for prevent closing on escape key okay next you want to scroll down to custom css and you're just going to copy and paste the css from the companion blog post and you'll find the link to this blog post in the description of this video okay now we want to select our section and it's right here on the left hand side and once again if you can't click on it just open the navigator and make sure you click on the section so now we can start editing the values so the content width should be full width the height should be fit to screen the column position should be stretch the vertical align should be space between now when it comes to the html tag you want to select header okay next you want to click on the style tab and then you want to select a background type classic and then for the color once again you want to make it transparent so pick any color and then you want to drag the opacity slider all the way to the left next you want to click on the advanced tab and next you want to unlink the margin value so we get 0 all over and you want to do the same thing for the padding values and next where it says z index you want to type 999 okay next we want to select our only column so you can either do it here or here in the navigator and with our column selected you want to click on the style tab and then you want to click on the border sub tab and where it says border type you want to select solid and then you want to unlink the values and we want a right border of one pixel and when it comes to the color i'm going to use the same color i used earlier on so it's going to be hashtag and e7e0 next i want to click on the advanced tab and where it says padding i'm going to unlink the values and it's going to be 30 pixels on top 0 on the right 30 at the bottom and 0 on the left okay before we add the content in the column i want to remove this box shadow so make sure you click on the gear icon at the bottom left corner in order to access the pop-up settings then you want to go to the style tab and where it says box shadow you just want to click on back to default and there you go okay now we can add our content so first of all i'm going to click on the widgets icon then i'm just going to type image and i'm just going to drag it in the column and like previously i'm going to choose my image it's going to be my logo here i want to make sure that it's centered and then where it says link i'm going to select custom url click on the dynamic tags icon and select site url next i click on the style tab and i'm going to select a width of 30 pixels in my case may differ for your logo next once again i'm going to click on the widgets icon and i'm going to add an icon so i'm just going to drag it underneath my logo so it's going straight here at the bottom but don't worry for that so let's click on the icon itself and once again i'm going to click on grip lines and i'm going to pick this one so we'll need to come back to this later because we'll need to link this icon to the full screen navigation but for the time being you want to click on the style tab you want to change the color to white and i have a color i'm going to leave it white also and for the size i'm going to pick 30. so of course you can see it because it's white and white but of course if i change the color you can see here at the bottom but let's put it back to the white color okay next i'm going to click on the widgets icon and this time i'm going to look for social icons and i'm going to drag it at the very bottom so i'm going to remove all of this and i'm going to keep youtube so the shape is rounded the alignment is in the middle now let's go to the style tab where it says color we want to change it to custom then we click on primary color we can pick any color and we're going to make it transparent so drag the opacity slider all the way to the left and for the secondary color we're going to pick white so once again you can't see it because it's white on white but it's definitely there and next where it says size you want to type 21. next you want to click on the publish button so it's going to ask you the conditions so let's click on add condition we want to include it on the entire website which is the default then click on next now for the triggers we wanted to load on page load so i'm just going to toggle this on then click on next and now for the advanced rules i want to go to show on devices i want to toggle it on and i'm just going to remove the mobile version because remember we only want this to show on the desktop and on the tablet and next click on save and close okay now let's take a look at the front end and as you can see it's looking good but of course when i click on it nothing happens and that's for a reason we'll come back to this later now let's take a look at the tablet version and the same thing it's looking good and for the mobile so there's no vertical sticky navigation but a top header which is what we wanted okay next let's create our full screen navigation so in wordpress you want to go to templates pop-ups and we want to create a new one so click on add new and i'm going to call it popup fs for full screen then click on create template but we don't want any of that so let me close this and we want to create a one column section but we'll take care of the section later so first of all we want to click on the gear icon which is the settings for the pop-up and now we can start editing the values so where it says width we want to change it to vw and we want a width of 100 vw for the height we want to change it to custom vh and it's going to be 100 vh the content position should be on top now for the position horizontally should be in the middle and vertically in the middle also we don't want any overlay but we want to keep the close button now for the entrance animation it's going to be fade in and then the exit animation is going to be fade out and we want to change the animation duration to 0 comma 2. now the animation is going to be different on the tablet and mobile so let's click on tablet and then this time is going to be sliding from the right and it's going to be slide out to the right and the same thing for the mobile but by default because we set it for the tablet should be the same but just to be sure sliding right and slide out right okay next we want to click on the style tab pick a background classic type and where it says color you want to pick the black color and then you want to drag the opacity a little bit down now now in my case i'm going to use this color code that you see on screen okay next you want to open the close button sub tab so the close button is right here on the right hand side so for the color i'm going to select the white color and then for the size on the desktop is going to be zero because we don't want to show this on the desktop nor on the tablet then you'll understand why in a moment so let's do the same thing for the tablet zero and then for the mobile and on the mobile is going to be 30. so as you can see it's visible on the mobile but if i go into tablet mode it disappears and the same for the desktop next you want to click on the advanced tab and where it says disable page scrolling you want to turn it on next scroll down to the custom css sub tab and then you want to copy and paste the code from the companion blog post and once again the link to this blog post is in the description of this video okay now we can start editing our sections so let's make sure we select our section or by clicking on the six dots and then on the layout tab you want to make the content with full width now the height should be fit to screen the column position should be stretch and vertical line should be space between last but not least html tag should be set to header next you want to click on the style tab click on the background type and make it transparent so we can pick any color and make it transparent next you want to click on the advanced tab and then where it says margin you want to unlink the values to have 0 on top and 0 at the bottom and same thing for the padding to have 0 all around so right now we have one column as you can see here in the navigator but we actually need a couple so what i'm going to do i'm going to go back to our previous pop-up where we created the sticky vertical navigation and here in the navigator i'm going to right click on the column i'm just going to copy it and then let me go back and here where it says column once again let me zoom in so i'm just going to right click and i'm going to paste i'm going to change the name so that it's easier i'm going to type sticky nav and i'm just going to drag this here it should be the first column so let me zoom back out so now we have two columns but as you can see our first column is way larger than it should be so with our first column selected you want to go to the layout tab and then where it says column width we're going to type four so it's four percent as you can see it's dramatically changed but even with four percent it's not exactly what we had in the previous pop-up if you recall it was 80 pixels wide so what we want to do still with our first column selected is go to advanced then we want to click on the custom css sub tab and then i'm just going to paste the code that you'll find in the companion blog post and now it should be exactly the same width as it was in the previous pop-up next still in the advanced tab you want to click on the responsive sub tab and you want to make sure that you hide this on the mobile because remember we want the full screen navigation to display on all devices but we don't want the first column to display on the mobile okay next you want to click on the hamburger icon and then we're going to change the icon to the close icon now you can pick any one you want i'm going to pick this one and where it says link i'm going to pick dynamic tags and then i'm going to look for pop-up then i'm going to click on the wrench icon and in the action i'm going to select close pop-up okay next i'm going to select my second column so i'm just going to click here then i'm going to go to the advanced tab and where it says padding i'm just going to type 50 pixels all around and i'm going to change it for the mobile so for the mobile let me unlink the values and it's going to be 120 on top 20 on the right 20 at the bottom and 20 on the left hand side now don't worry about this showing up here in the mobile version because it won't show once it's live so let's go back to the desktop version and now i'm going to click on the widgets icon and i'm going to type nav menu and then i'm just going to drag it in the middle of the second column next let me select the second column go to the layout tab and then i'm going to vertical align in the middle okay so now let me select my nav menu once again and where it says menu i'm going to select my menu next where it says layout i'm going to select drop down and then align i want it to be in the center and the toggle button i want it to be set to none next you want to click on the style tab next where it says text color i want to change it to white then where it says background color i want to make it transparent so let me drag the opacity slider all the way to the left okay and let's do the same thing for the hover and active so white color and transparent and the last one for active okay next typography so we're going to pick a font called fiala one now when it comes to the size we want it to be 160 pixels on the desktop we want to transform it to uppercase and then we want to go straight into tablet mode and it's going to be 70 pixels and then in mobile mode it's going to be 36 pixels and by the way for the active color a good idea would be to change the text color even so slightly let's go back into desktop mode so where it says vertical padding you want to make it 100 pixels for the desktop then for the tablet is going to be 39 and for the mobile let's pick 28. next let's publish our pop-up so click on publish add a condition so include on the entire website that's fine next we don't want any specific trigger and next we don't want any advance rules so let me just click on save and close okay next we want to go back to our first pop-up which is a sticky vertical navigation and we want to select our hamburger icon here in the middle now it's white and white so you won't see it but one thing you can do is go straight into the navigator and select the icon so next you want to go on the content tab of this icon and where it says link you want to select dynamic tags and then you want to go all the way down to pop-ups then click on the wrench icon and where it says all just click on it and now you can start typing so the one i want to open is called fs in my case i called it pop-up fs now if you change the name make sure you type the correct name and then click on update and next you want to go back to the header that we created for the mobile earlier on in this video and you want to do the same thing so you want to select the hamburger icon right here and because it's white on why you can't see it but you can always go to the navigator and select it then you want to go to the content tab and where it says link same procedure dynamic tags go to popup wrench icon and now you want to type the name of the navigation and once again it's fs in my case so let me do this and click on update and now let's go back to the front end and let's refresh and now if i click on the hamburger icon as you can see i got a beautiful full screen navigation semi-transparent just a little bit of transparency and if i want to close i just click here on the close icon and then i'm back and it works as a scroll same thing i click and it works and for the tablet version let's just refresh the page and as i click on the navigant as you can see we have a problem here so to fix that let's just go back to elementor pro and the reason for this is because we've set some custom css saying that the first column is 80 pixels wide so now it's all messed up with the percentages so all we need to do is click on the second column and then where it says column width we're going to play with the values so we start at 96 and then we go down 95 4 93 92 91 and from 89 it starts working so just to be on the safe side i'm going to pick 88 and then just click on update and now let's go back let me refresh and now when i click it's looking fine so let's scroll as you can see it's sticky and when i click all working fine okay and for the mobile version let's refresh and this is our top header version and when i click on the navigant it works fine but if i start scrolling as you can see there's no sticky header so in order to fix that let's go back to elementor pro and this is our header so with our section selected you want to go to advanced and then you want to click on the motion effects sub tab and where it says sticky you want to change it to top and then where it says sticky on you want to remove the desktop and the tablet because we only need this behavior for the mobile and then let's just click on update and now if we go back so let me refresh the page and as you can see it's working fine we have our header even as we scroll we can still access it and when we click on it it's working beautifully now one more thing that's very important and that you should do is to give this video a thumbs up if you got any value out of this video because that took so long to create and for you it's only a split second but that's gonna change so many things for the youtube algorithm and for this channel now i don't know about you but if you look at the initial demo that i showed you there are a couple of things that are different from what we've built so the first thing is this custom cursor that you see on screen well luckily for you i've already covered that in another tutorial so you'll find a link to this tutorial in the description of this video and the second and main thing that you probably see right now is that instead of scrolling vertically this website is beautifully scrolling horizontally and once again it's a lucky day because i've already covered that in a previous tutorial and you'll find the link in the description below and in the card at the end of this video now as you can see on this website i created a beautiful fake brand now if you want to create a killer brand identity for yourself or for your clients i created a free brand identity guidelines template that you can download on my website for free so initially it was made for affinity designer but you can use it with adobe illustrator with a workaround so if you are interested make sure you go to casino.com forward slash branding and just follow the instructions on screen now if you don't want to miss any of the beautiful tutorials that i'm going to release on this channel as well as the content that i release because i'll talk about everything web design make sure you subscribe and smash the notification bell so that you don't miss anything now i can't wait to see what you're gonna come up with after this tutorial so get creative because creativity is part of the fun in web design don't forget i'm trying to create the content i wish i had when i got started so i'll see you in the next one and until then take care and stay safe

Channel: Kaycinho The Digital Alchemist

Views: 3,672

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

Id: 8eGelGWkwRw

Length: 31min 52sec (1912 seconds)

Published: Thu Sep 30 2021