Sticky Vertical Menu Elementor Pro Modern Navigation

how to create a sticky vertical menu if your WordPress theme doesn't offer that option out-of-the-box when this video will show you how to create a modern sticky vertical menu with a little pool [Music] hello I'm your host casino I'm a digital Alchemist and in this video I'm going to show you how to recreate the modern and beautiful sticky vertical menu of a side of the day nominee on the awards website and for that we use elemental pro only now even though we'd be using the free version of the WordPress Astra theme feel free to travel with your theme but if you want to follow along exactly as I do you might as well want to install Astra it's free and it's lightweight the only premium plug-in that we'll use for this tutorial is Elementor pro now as usual you'll find in a field linked to elemental pro in the description of this video no need to say that I do recommend a Dementor pro because I absolutely love this tool and I use it each and every day now to be crystal clear I do get a commission if you purchase through my link but you don't pay anything extra so you don't have to but if you do let me officially thank you alright enough talk listen okay so first let's take a look at what we are doing to build initially I googled a Wars vertical navigation and as you may have guessed I leaned it on the wars website which I love by the way and I landed on this particular website it's from an Italian web and graphic designer based in Amsterdam as the title says and you know initially I'm not too much of a fan of vertical navigation but you know what design is like fashion it comes and goes so at the very beginning of the internet it was very common to have vertical navigation maybe that's why I don't like it too much because to me what it was a bit like old school but then that's not always true because I've seen many people come up with very beautiful vertical navigation designs and but usually what I don't like is that is taking a lot of screen real estate whereas in this version here you click on the nav ikonn then it's going to expand into the sticky vertical navigation but it doesn't compromise with the rest of the content and I really love that very many more if you know anything about my channel you know that I love minimalism okay so basically this is what we want to build and we'll make it a bit different on a tablet in the mobile because let's take a look at what he did so this is the tablet version we have the social icons here and when we click on the nav ikonn we have the sign navigation that comes from the right hand side this time we'll have something similar but you know I can totally understand for a graphic in for graphic designer to put social icons here because he wants to showcase his work and maybe he wants people to go to is be ins account tribal LinkedIn Instagram and so on but for some other businesses the name of the game is to keep people on your website you know if you think as a as a marketer you want people to stay on your website and take some action you don't want to send them back to the social media once again that's not always the case some people it's good to send them to showcase their work or whatever but if I think about my case I wouldn't want to drive people away so I've decided to place the icons here in the nav and give it some visual hierarchy to just make the the local website many more important that's just my opinion but that's the way I see things and for the mobile if we click here we can see that he put the icons here and basically that's what I'm going to do also okay so let's take a look at what well before we do that let's take a look one more time at the desktop version and now let's take a look at what I came up where I came up with now that's not a complete clone once again I change the image I'm not using video using a different theme so it says voice search will never be the same so it has nothing to do with a with a graphic designer but once again video is very beautiful and very nice especially for a graphic designer but for some other businesses actually most of the time a static image converts better now if you want some steal some animation then some really subtle Ken Burns effect can work and that's what you see here on screen so very slow but a little bit of animation once again that's not a definite rule you can use video you can have great results with videos I'm just talking about the results that I got from my own websites or a person from some clients statistics and usually it works better with a static image okay so here is a compromise it's not a video it's not a static image but just some nice Ken Burns effect okay enough talk once we click on the Navigon you can see here we have the effect that we wanted so let's take a look okay the only thing that's not the only thing but the main thing that's different is that when you click here the whole menu is here whereas here let me close and open see it comes one after the other it could also achieve that here and our different ways you could achieve it you could create four different menus you know and just load them sequentially but that's not the best thing to do you could use buttons well there are many different ways you could do it but for the sake of keeping this tutorial sure enough because it's already going to be a long video so I went simple here simple but I'm trying to make it look beautiful so we also have the social icons here okay and if you move to the tablet version as I said instead of placing the social icons here I play the social icons here at the bottom and I gave it some visual hierarchy awesome because this looks more important than the social icons but if people want to go and have a look they can still do it same thing for the mobile if you click that's how it looks like okay so that's what we're going to build in this video now the only premium plug-in we're going to use in this video is Elementor Pro for the rest we're going to use the Astra theme the free version of the theme so if your is using the health theme or any other thing like ocean WP you should be alright but if you really want to follow step by step what I'm going to do you might as well install Astra it's the free version so there's nothing to pay and at least is sure that you can really follow along with what I'm doing now if you know Elementor Pro then I don't need to convince you but if you don't you may be thinking why should I need Elementor Pro because the free version is already dead good why would I need Elementor Pro well apart from the fact that if you want to follow this tutorial you need elements or Pro but the rest is that for example you have the theme builder well I'm not gonna go through all the features I want to move on with the tutorial but if you're wondering why you should get elemental pro some some of the main elements for me are the theme builder actually you can theme elements the header footer the archive page WooCommerce pages you can get a sticky header you can change the template for the blog post so for example let's say you have 500 blog posts on your current website and you want to move on to element or well you could just style one once the single post template and apply to all of your 500 blog posts ain't that great so for the rest I'm not gonna go through every everything there's a lot of Pro features but I'm just gonna put a link in the description of this video and as usual it's an affiliate link you know the drill okay and for pricing it's 49 bucks per year so approximately fourteen cents per day now that that's a one website now I can totally understand that for some people 49 bucks can be it can be too much because it depends on where you're living or maybe not even where you living maybe you're in a buy a bad financial state so I can totally understand that the advice I always give is try to make some money back with a project try to make a beautiful website try to sell it to someone needs a beautiful website and everybody needs a beautiful website what I'm trying to say is trying to make some money back first just work with a free version of Astra or Ocean wpe and Elementor and once you made a little bit of money back it's a good thing to invest in your business in yourself and when I say invest in yourself and in your business it's getting some pro tools that's gonna just make your life way easier and if you're wondering how you could make some money back now you could sell your services just go through the videos on my channel look at the titles because I have a few videos just about that how to make some passive income how to make money with web design just go through videos all the keys are in there okay with that out of the way let's move to the WordPress admin and the first thing we want to do is go to appearance themes and we want to install the Astra theme now I've already installed it but if you want to know how to do it click on add a new theme then you're just going to type Astra it's gonna look for it and then you will click on install and then you will click on activate mine is already installed but I'm just going to make sure and activate it okay so now it's activated the next thing you want to do is you want to add some plugins so we going to add Elementor first you need to add the free version so for that you go to add new then you type in a mentor and click on install and activate so I'm not going to go through all of that next you need to download and install Elementor pro from the Elementor website and also install another plugin called sticky menu but we'll touch on that later okay next you want to go to pages add new and we're going to add a new page we're gonna call home and because I'm using Astra I'm just going to disable the title here because I don't want to show it by default so click on publish once you're happy with that and we're not going to edit the page right now so go to settings reading and for the home page we're going to select a static page and we're going to select the the page that we just created that we called home for the rest we're gonna select each article in the feed to summary now that it really does matter here because it's just a tutorial it's just a good habit to take and we're also going to discourage search engine from indexing this website so click on Save Changes okay so once we've done that let's go back to our dashboard and the next thing we want to do is to create a menu so actually let's go to appearance menus and we're going to create a new menu that I called main menu then click on create menu I'm going to add the homepage to that menu and then I'm going to add some fake custom links so the first is going to be Who am I second is going to be some projects and third is going to be contact me so next make sure you tick the primary menu option and click on save menu okay so that's it for this first step and in the next step we're going to actually edit our homepage so in this section we're going to edit our homepage so in WordPress go to pages all pages and then hover over the homepage and click on edit and next click on edit with Elementor okay great so the first thing we want to do is to set our fonts and colors click on the Navigon here on the top left corner of the window then click on default fonts and as you can see I've already added montserrat for each font here so just click on the drop down and you can start typing the phone that you want next for the colors same place click here on the Navigon in the top left corner of the window then click on color picker and basically you can use the colors that you want but if you want to follow along I mean we'll be using this one here so it's 4 to 3 eb to f5f5f5 and 4:05 for v2 ok so if you change any color you will click on the apply button here ok next we want to start creating our section so click on the plus icon here and we're going to use a 1 column section we want it to be full width we want no gap and we're on the height to be a minimum height of 100 VH okay column position we're going to keep it in the middle for the time being and for the rest we're not going to touch anything here okay next move on to the style tab and we're going to add a slideshow so click on slideshow and we need to select some images now I've already uploaded a couple of images now why coupl it's a slideshow but initially I just wanted to have one picture with a Ken Burns effect but for some reason it doesn't work if you only have one picture so you need to have a couple so what I did is I just duplicated one picture and change the file name so I'm just going to create a new gallery and I'm going to insert the gallery now we'll come back later to the Ken Burns effect because actually insect it's using some resources so what we didn't do tutorial I don't want to use too much resources because I'm capturing the screen at the same time and also I don't want you to be distracted so we do that at the end okay for a moment you can see that it's just changing and fading the images so I'm just going to remove the infinite loop so it will only do it once and we'll come back to this later okay now the background overlay so click on classic we're going to select our blue color and actually we want to give it an opacity of roughly 80% yep okay so well it's 80% here by dragging the dragging the opacity down to 80 and it's 0.5 here but it's the value by default okay so next we want to add a title so click on the widgets icon and we're gonna drag a heading right here so we want to make it on h1 we want to center the text and we want to start it so go to the style tab text color should be white and for the typography we're going to change the way to bold and we're going to transform it to uppercase now let's go back to the content and I'm just going to type voice search will ever be the same okay next we want to add a button so let's click on the widgets icon I'm just gonna drag and drop a button here so I want to Center it I'm gonna type meet the future and for the link I'm just going to link to the discover section that we haven't created yet but we'll come back to that later and for the rest we want to move to the style tab we want to select a background color of our blue color text color should be white and on hover we actually let me go back I'm going to select our blue purplish color for a normal state and on hover I'm going to select our blue color and the text color should still be white for the hover animation we're going to use the float animation so that's what it does the border-radius we want to add 15 to have that nice round round styling and for the padding we're going to unlink the value and it's gonna be 15 on top 70 on the right to 15 at the bottom and 70 on the left hand side okay so looking good but in my opinion it's way too close so let's select our heading then move on to the Advanced tab and we're going to unlink the margin values now I want to add 30 pixels at the bottom to give some nice spacing between the title and the button and 90 pixels at the top because I don't want the text to be too high on the image okay so that looks good let me add a second section actually we're going to add it from a template so click on the folder icon here then click on blocks and we're going to select the second one here so click on insert okay next make sure you select the section go to the style tab and we're going to change the color to our blue whereas for the text we're going to change text color to white and drag the opacity down a little bit okay okay and we need to give it a name if you remember let's look at our button so if I click on the Edit icon for the button go to the content tab I'll link to hashtag discover so the hashtag is for Eid the pound sign so now I'm just going to copy discover without the pound sign and move on to the second section so click on the edit section six little little dots here and next I'm going to go to the Advanced tab ID and I'm going to paste discover so let me just update the page and now if you go into preview mode when you click on the button it goes straight to the discovery section and that's what we want it okay so that looks pretty much like what we wanted but now we need to take care of the tablet version so let's take a look looks good in my opinion but still I'm going to give it some padding just to be on the safe side so click on the column icon here then move on to the Advanced tab I'm just going to unlink the padding values I'm just gonna make sure I've 50 pixels on the right and 50 pixels on the left-hand side now let's move to the mobile and here once again I'm going to select the column go to the Advanced tab and link the values and here I want 20 pixels on a right hand side and 20 pixels on the left hand side okay so that looks good to me now let's a better page and there you go let's take a look and it works great so that's it for this step and in the next step we'll take care of actually styling the page template for the whole website this step we're going to alter the WordPress page template with element or pro we're going to add the vertical navigation as well as the tablet and mobile versions now I know that with elements or pro there's a header and footer themer but as I mentioned it doesn't come out of the box for a sticky vertical nav so that's precisely what we're going to do with a little workaround so the first thing you want to do is go to templates theme builder then move on to the single tab and we're going to add a new single template so select the page type and we're going to call it vertical nav page template or we can call it however you want but let's not call it vertical nav peach template then click on create templates and we're not going to use a predefined template so just close that so the first thing you want to do is actually go to the settings so the little little gear icon in the bottom left corner and then for the page layout we're going to select element or canvas okay so as you can see with the elemental canvas type of page there's no header and no footer and that's precisely what one because because you are going to build our own so just to save our word let's publish our page and we want to include it to all pages but if you just wanted that template to be applied for a specific page you can play with the options here you can also apply to posts or a different type of custom post types but not to confuse you just click on add condition and that comes by default so just click on save and close so next we want to create a section with two columns okay so let's start styling it so first we want the content weight to be 4 with you want no gap for the columns and for the heights you want a minimum height of 100 VH you want the column position to be stretched so I go it goes all the way to the top okay we're not gonna play with vertical alignment and overflow at the moment so let's go to the Advanced tab and we want zero padding and zero margin okay once you've done that click on the first con and you want to give it a 5 percent with now to help us let's take a look at what we want to achieve this is what we want to achieve and this is what we have currently well we haven't refresh the page yet but this was what we had at the beginning but this is what you want to achieve so if I go back here we can see we have one column here and then we have the content here that's what we see here and here we have the logo then the nav account and the social media icons okay so let's go back and I don't know if you can see here we have a box shadow it's very subtle but when you expand you can you can see it okay so let's go back make sure the column is selected so we want to go to the style tab border box shadow and we want to actually change the box shadow to around 15% so let me change that 0.15 okay and for the rest it's fine so we can't really see it right now but the word you'll see it okay so next we want to go to click on the widgets icon and we want to drag an icon okay so first of all we want to change the the actual icons so click on the icon and I'm going to type paper because that's what I used in the demo but of course you could use an image because right now I'm using an icon but unless you've changed your logo into an icon which you can do now with I mean you can take your logo make it into an SVG and then you can upload it as a font with elements or pro but we know we're not going to touch on that in this video so let's say you had an image you would click here on the which is icon then you just drag an image here and select your image but we're not going to do that today okay so let's start our icon so first it's supposed to be a logo a homepage logo so we're going to add a link to the home to their homepage so instead of copy and pasting the link of your website you can click on dynamic and click on site URL so now it's a link and when people click they will go back to the home page which is what most users expect when they click on the logo of your website next we want to click on style and we're going to change the primary color to black and the hover color to blue and we want to give it a float hover animation there you go and for the size let's try yep 33 is nice but let's take a look the example actually it's bigger so let me edit that make it bigger 45 okay next we want to add a Navigon so we're just going to duplicate that I can make sure you edit editing the second icon and this time we want to remove the site URL link we want to change the icon to lines so I'm going to use the these lines but OH otherwise I think you can use okay not hamburger how did I call it they call the bars you could use that one but I'm going to use lines okay and I want to go to style and make it 25 okay next I want to add some social icons so click on the widgets I can type social and that's the first one that comes up okay so it's a line in the middle fine this one to the style tab custom color for the primary color you want to drag the opacity all the way down and for the secondary color we're going to choose black okay for the size 18 you'll be fine padding 1 and spacing 0 so that it's perfectly vertically aligned okay next for the icon hover we want to change the secondary color to blue okay and we want to add a float hover animation so that we stay consistent with the other icons okay so looking good but as you can see the example first of all there should be some space between the edges and also the positioning of the various elements is not the same we want to be all across the heights of the column so click on the column icon then move on to the Layout tab and in vertical line we are going to choose the space between option there you go looking much better and next click on the Advanced tab and link the padding values and we want to give it a subheading of 30 pixels and a bottom padding of 30 pixels okay so looking much much better okay next once we've done that looks fine click on the second column I can here move on to the Advanced tab and we want to give it padding of 0 just to be sure that for example if you put an image in there you don't want any padding you want to be ready for with so zero and click on widgets icon and you want to add post content and because we are editing a actually a theme template with the elemental pro we have some other options here for the single type so you want to drag the post contents right here there you go and it automatically loaded our home page which is the only page we have I think at the moment so by default okay so this is our page but the image is not showing so I'm just going to refresh the page once I've saved make sure you say before you do that but this is what I've done so as you can see now we see the image now let's go back to the front end so this is what we had and now there let me refresh the page yay much better but as you can see this that's a problem because the now the icons are stretching all the way across the content so the content was even longer you wouldn't even see the Navigon here this is not what we want and for that of course I have a solution so let's go back and let's go back to WordPress go to plugins add new and you want to look for a plug-in that's called the sticky menu so just type sticky menu and it's the first one so it's sticky menu or anything on scroll now I've already installed it so I just clicked on install and I haven't activated so we're going to do it together so click on activate there you go it's activated next you want to click on settings and basically there's only one thing you need to do here you need to add what you see here on the screen so that's my nav Y you can call it the way you want but if you want to follow along with the tutorial I call it my nerve so if you're not familiar with CSS don't be scared all I need to do is copy and paste and it does any code you will find it in a companion blog post but for the time being you just need to write dot my nav and we just want to copy the my nav part without the dot okay if you familiar with CSS then you know what I'm doing if you don't basically this is the class and we're going to reference that class name in Elementor so save the settings and you're going to understand in a moment so let me go back to our first column so I'm just going to click on the column and now I'm going to go to the Advanced tab and I'm in CSS classes I'm going to paste my nav with that dot okay so let me update that and now if I go back here and refresh the page as you can see now it's sticky but now we have another issue instead of stretching all the way across what's seen on-screen it's all it's all narrowed here and that's not what we want but of course there's also a solution for that so let's move back and I hope you're not scared with CSS I don't worry so just refresh the page so we have the exact view so this is the view that we have in the front and also selects the column and what we want to do is go to the Advanced tab custom CSS and we want to type dots my nav open and close brackets Heights : 100 VH and voila completely magic there's another way we can do it I mean this is the yeah this is the the best way to do it you just type the name of the class that we reference into the sticky menu plug-in and it's it's gonna work fine so if I go back to the front-end refresh now it works fine we can scroll and here it stays sticky okay but there's another way we could do it and this is really specific to Elementor don't try to do that with regular CSS instead of my nav we can just use selector and the same thing happens it's exactly the same thing so let's update that's refresh and still work the same so if you wanna if you don't want to type the the class name you can use selector but I'm just gonna keep mine F now the custom CSS feature of elemental pro is very handy but usually I prefer to have most of my CSS in one spot so it's easily - I mean it's easy to to edit if you want to eat some code just imagine you have 200 pages and you have bits of CSS code here and there can be a nightmare to find where is your CSS unless they come up someday with a I don't know a custom CSS Feiner maybe it's already available I don't know but basically this is just a tutorial so I'm not going to do a full course on how to manage your CSS classes but basically keep that in mind but for the time being I'm just going to leave it the way it is okay so that works fine but now let's go back to the front-end and let's move on to the tablet version let's refresh and as you can see doesn't look that good so let's go back and let let's fix that okay so first of all you wanna go into tablet mode and I'm going to select our first section go to the Advanced tab responsive and I want to hide that first section and on mobile I'm just going to update okay and next I'm going to open the Navigator so had in the bottom left corner of the window click on navigator or you can use keyboard shortcut command + I on the Mac and I guess it's ctrl + I on Windows but not sure you let me know so once you're in the navigator you can expand the section so this is our first column actually I'm going to rename it vertical nav that it's easier and the second column is the content okay so the vertical net we don't want to see it I'm just going to click on the little eye here because even though I've mentioned I don't want to see it responsively on the tablet and on the mobile because I'm logged in as an admin and I'm actually editing the page I'm still singing so that's why I click on the little eye here now there seems to be a bug because it shouldn't be showing that space here but it's going to fix itself in a moment so next I'm going to click on the content column and I want to give it 100% okay there you go so let me click on update and as I mentioned before sometimes these kind of bugs happen I'm not gonna say it's completely normal but it's not the first time in most of the tutorial I get across these bugs so all you do is refresh the page once you have saved the page okay so let's go back into tablet mode let's hide our vertical nav and let's move on to our content tab you still have that vertical space here but look if I click on section and then I'm just going to add a new section so let's click on the plus icon and we're going to add a section with two columns as you can see the the big white space we had just disappeared so make sure you editing the section and we're gonna start styling it so we want it to be full width we don't want any column gap the height should be a minimum height of 90 pixels oh nine zero the column position should be in the middle okay next we want to add our logo and the Navigon so for that we're just going to re-enable the vertical nav just here in the in the current view so I'm just going to copy the icon and paste it here and I'm going to copy the Navigon and I'm going to paste it here okay so once I've done that I can once again hide the vertical nav okay so first I'm going to select the column go to advanced and I want to give it zero padding next I'm going to click on the icon I want to align it left then I want to click on the second column advanced zero padding and I want to click also on the icon and I want to align it right now back at column level here so click on the column icon go to the Layout tab and vertical line to the middle that's its vertically centered and even though it seems like we don't need it here just to be on the safe side let's do the same thing for the first column so click on edit column Layout tab vertical-align:middle okay so as you can see the problem we have is that this way too close to the edges so click on the section click on advanced and link the padding values and I want to give it 30 pixels rights and it 30 pixels left padding and as you can see it's looking much much better okay next we want to make this sticky so first select the column go to the style tab click on the classic type and give it a white color I know he already looks white but actually it's just transparent and because the the main color when there's nothing is white behind then it looks white but if you use it as sticky it would be transparent so that's why we make sure we'd give it a white background solid background color okay so still with our section in focus go to the Advanced tab motion effects sticky and click on select op okay we don't want it to be sticky on the desktop so just remove desktop so it's just gonna happen on the tablet and the mobile and while we're at it just go to the responsive tab and make sure that the whole section is hidden on desktop because we already made the the I mean the same thing for the vertical nav we made sure that he was hidden on tablet and on the mobile and we need to do it the other way around for this section we only wanted to show on tablet and on mobile so click on update now let's move back to the front and our website let's refresh the page and as you can see it works fine now of course we haven't created the of canvas navigation yet so when we click on it nothing happens but that's completely normal for the moment so that's looking good now let's take a look at the mobile version let's refresh not quite what we wanted so let's go back that's going to mobile mode okay so first we're going to select our section go to advanced and link the padding values and this time we're going to give it 20 pixels right and a 20 pixels left padding okay next we want to select our first column and the layout tab you want to give it a column width of 50% okay and let's do the same thing for a second column you want to give it 50% okay now for each column go to the Advanced tab make sure it has zero padding okay and back at the section level so click on the six little dot here or select the section in the navigator go to the Layout tab and for the minimum height we want 65 pixels okay so looking good but the navigation is B I mean the navigation I can is a bit big and I'd mean navigation I can I'm in the home the logo of the website sorry so I'm just going to go to the style tab and I'm going to play around with it yeah okay 28 that's fine okay so now let's go back to the front-end let's refresh our page yep looking much much better now just to be sure let's click on our column and make sure it's vertically aligned also although it looks already aligned but just to be on the safe side and click on update once you're happy with it okay so that's it for this step and in the next one we'll create our of canvas navigation this step we're going to create our of canvas navigation so in WordPress go to templates pop-ups and we're going to create a pop-up so let's call it pop-up of canvas navigation click on create templates as usually you can use predetermine predefined templates but we don't want that so close that next click on the plus icon and we want a two columns pop up and we want to start editing the pop up settings first so at the bottom left corner of the window click on the Settings icon so the little gear icon here and we can start styling it so for the width select VW and give it a value of 33 the heights should be custom and it should be value of 100 VH content position should be top horizontal should be on the left hand side for the rest overlay close button is fine we want sliding left has entrance animation and slide out left as exit animation and the animation duration should be zero point two so very fast okay next you want to click on the style tab you you want to give it a blue overlay so let's select our blue color okay make sure it's zero point eight right here so by dragging here you can play with it and just to be sure yeah zero point eight okay next click on the close button and for the close button we want it inside so by default we want the color to be black the size should be thirty and next click on the hover tab and you want to change the color to blue there you go okay so let's take a look at our page let's look at the initial example when we click this is one we want okay so let's go back and before we do anything here we're going to publish our pop-up ad a condition include on the entire website click Next we're not going to add any triggers and no advance rules for the time being so click on save and close okay so now that it's updated we can temporarily move back to the page template that we edited in the previous step and now we're going to click on the Navigon so here we own the mobile and tablet version so edit the Navigon and in the content tab we want to add a dynamic link so where it says link here you find dynamic on the right hand side click on it and then we're going to add a pop-up so click on actions pop-up and once you've done that click on the little wrench icon next to pop-up then click on all and in the search engine you can start typing the name of the pop-up that we've just created and saved that's why I started by pop up it's easier to find so pop up of canvas navigation ok and I want to repeat the operation for the other nav account for the vertical nav so dynamic add a pop-up wrench icon search engine and type pop-up ok click on update and now let's go and have a look so this was the initial example and now let's move to our current website let's refresh the page now if I click on the Navigon yes it works it's nothing but it works ok so we can close that and go back to Elementor ok so the next thing you want to do is you want to click on the first column so but we were still in the page template also click here on the first icon on the first column right click and click on copy ok next we want to go back to the pop-up that we were editing just before that and first of all you want to start our section so click on the stick the little dots to edit this section or just click on the section here in the navigator and then we want to change that to full width column should be no gap the minimum height should be 100 VH and the column position should be stretched so that all the content is stretched vertically okay next we want to click right click on the first column and click on paste and there you pasted the column that we just copied from the page template so once you're happy with that right click on the first column and delete the first column now if you recall in the page templates the column width was 5% and that's when this is the full page so full page is 100% and we take 5% now here in the pop-up the whole pop up is a third of the page so only 33% and if you want to maintain the same more or less the same width need to do 5% times 2/3 now I was not the best in math but I hope it makes sense so make sure it's you select the first column and now we want 15% okay you want to maintain the same ratio as you can see it's more or less the same okay so let's just update our page so with our first calm being selected move on to the Advanced tab and you want to make sure of two things first of all is that the z-index is said that 10 you want to make sure that it's on top of everything else and you want to remove the my knife class now why would you want to do that because as you can imagine I tested before shooting this tutorial and for some reason having the my class both here in Afghanistan and on the page template right here cause some issues so let's go back to the column so I'm in the page template here we can leave the my nav but if I move back to the pop-up no mind no my nav so the Afghan vest navigation class should be empty and if I move back to the page template there you should have the my nav actually we also going to give it he said index of 10 make sure it's above the rest of the content and in the of canvas navigation let's give it 11 now you may be wondering why do we have the same column in two different pieces of content because if you want if you want to change something in one it means you would have to change it in two places and that's true but if we go back and look at the initial model what we want is that when people click we can still see the the bar here and then it expands now initially what I wanted to do is just have one one one come here that would be on top of the extension playing with the z-index but for some reason it doesn't work so that's the only workaround that I've found okay so let's go back to what we currently have steel empty okay now let's go back to editing our pop-up so once we've done that that seems to be fine now we can start styling our second column so click on the second column move on to the style tab background type classic and we want to select our f5f5f5 color and it doesn't show now we just need to add some some content so click on the widgets icon you can start typing nav menu so I'm just gonna drag and drop the nav menu here and as soon as I've done that you can see the color appearing so let's select our column layout tab and we want to vertically align it to the middle okay next click on the nav menu edit icon and we can start styling it so we want our layout to be drop-down and we want the toggle button to be set to none okay so that looks fine but we need some space around the edges so let's click on the column I can then move on to the Advanced tab and let's give it a 30 pixels padding all around looks much better once we've done that go back to editing the nav menu so click on the Edit icon let's move on to the style tab and the first thing you want to do is to drag the opacity of the background color to zero and you want to repeat the operation also for the hover state and for the active state next let's go back to the normal state text colour should be black and on hover it should be blue and same thing for the active tab okay next we want to edit the typography so let's give it inside of 28 let me take a look yep so 28 HB bold you want to transform it to uppercase and let's give it a letter spacing of 1 okay fine so let's click on update and now let's go back to our current website let's refresh and by clicking on the Navajo on yep that's what we want it so we can click on the cross we can click here in the overlay or we can just type on the Escape key on our keyboard and the result is the same so mission accomplished for the desktop now we still need to add Ken Burns effect but we do that right at the end ok but let's take a look at the mobile doesn't look good and tablets nope that's not what we want okay so let's go back and now let's move on to tablet mode first of all let's select our pop up settings by clicking on the gear icon in the bottom left corner of the window and once again we're going to hide the vertical nav now just to be sure let me put it back just to be sure to select the vertical nav go to advanced responsive and just remake sure that it's hidden on tablet and on mobile then you can hide it from the admin view also by clicking on the little eye here as we've done before okay so next once again click on the Settings I can for the pop up and you should see pop up settings here just if you want to be sure you editing the right spot and we can start styling for the tablet so for the width we want to give it a vert VW of 66 the custom height should be still 100 pH the horizontally should be aligned on the right hand side and for the rest the sliding animation should come from the rights and it should go back to the right so slide out right slide out right and we still have an animation duration of 0.2 seconds so very fast now as you can see here we can see now some white space here so to fix that we're just gonna go back to the style tab background type color and we're going to select the same color then we have here in the column so f5f5f5 okay so it's already looking much better now if you recall let's look at the previous I mean at the initial model when you click one in tablet version you can see some icons here social icons and if you look at our current version if i refresh i haven't saved yet so let me save let's refresh we're lacking the social icons so let's go back to Elementor and for that we're going to reactivate the vertical nav I mean just the view in admin and we're going to copy the social icons module and once we've done that we can hide once again the the vertical nav okay now click right click on the nav menu here and click on paste and there you go we have our icons here but these icons would also appear on the desktop and we don't want that because in desktop there's already a vertical navigation with social icons so make sure you select the icons go to the Advanced tab responsive and make sure you hide it on the desktop okay once you've done that go to the content tab and aligned the icons on the left okay so looking great but as I explained earlier I want some visual hierarchy so I want to add some space here so let's click on the nav menu edit icon go to the Advanced tab let's unlink the values the margin values and we're going to give it a two hundred pixels bottom margin so let's update now let's refresh and that's looking fine okay so next what I want to do is set things for mobile so for mobile first thing first doesn't look good we need to make this wider so click on the Settings here on the public setting so at the bottom left corner of the screen the width the VW should be let's say 85 the Hydra bit custom and it should be 100 VH just like the rests still horizontally on the right hand side and we want the sliding sliding animation to come from the rights and we want it to slide out right also 0.2 of animation duration still ok and then we want to start editing our nav menu so click on edit nav menu go to the style tab and let's put a size of 22 looks fine then move on to the Advanced tab and link the margin values and this time we're going to give it a margin bottom of 100 pixels click on update now let's check our mobile version refresh looking great so let's go back to editing our page as I said we're going to add the Ken Burns effect so with the Navigator open make sure you select the first section so just to make sure we are not editing the pop-up for the Afghan of canvas navigation and we're not editing the page template we're just editing the regular page the home page actually so if you want to be sure let me go back all pages so this is our homepage click on edit with Elementor okay in case you closed it okay so we're going to edit our page so select the first section here go to the style tab and here where it says background you want to add an infinite loop change the duration value to 30,000 milliseconds so it's 30 seconds and we want to switch on the Ken Burns effect so click on updates there you go next let's refresh your page and as you can see we have this very subtle Ken Burns effect you can click on the button goes to the next section and our sticky navigation is very subtle very minimal and when we click on it it expands the Afghanistan a vacation now if you move on to the tablet mode refresh your page sit about Ken Burns effects in a very beautiful of canvas navigation that comes from the right we dedicated icons social icons and last but not least especially in terms of traffic nowadays the smartphone the mobile so click on the Navigon and once again we have a beautiful navigation coming from the rides and with social media icons and sliding back to the right so once again let's have a look at our desktop version and there you go so we've covered a lot of ground so congratulations if you if you still here watching this video and even better if you can implement it and create your own you know I'd be thrilled to see what you come up with so let me know in the comments and I really hope you enjoyed this tutorial this is the you know the tiny little details that can make your design stand out so I really want to thank that designer you know I'm grateful to have websites like Awards and others that showcase the best of the best and it really inspires us now once again this is not about stealing someone else work but this is about knowing how to recreate things that you see so now it's your turn to get creative now if you're interested in purchasing elements or pro as mentioned at the beginning of this video you will find an affiliate link in the description below now if you enjoyed this video please like it as you really really really have grown this channel and if you know someone that could benefit from it please share it now you see how long these tutorial is now would you believe me if I told you that I recorded everything and then it was like recording for two hours you know I started preparing in the morning actually started working the day before trying to find the ID then try try to recreate what I was trying to create then try to take it step by step you know recreated it a few times then I record two hours then I'm so happy it's like the end of the day but I think I can still make it editing and everything and then my screen for the ScreenFlow crashes and I lost you know I was trying to recover the the raw footage but wouldn't work spinning wheel of death so I can laugh about it now but you should have seen my face when I was experiencing it you know but I started right away I was like no man no way so I started right away so my hope is that it helps even if you have one one person you know that would be worth it and that's the kind of thing that happens you know I've heard other youtubers that you know we're explaining that but when you on the other side of the screen of the of the camera yeah you hear it and yeah it can be tough but I don't really really realize what went into this it's not bad because actually it was easier to do the second time around so and he told me a lesson or two about the software I'm using which is a pretty good software and the hardware is good also it's just that it was way too long and of course when I when I try to save if anything happens then you lose everything so now I'm saving in smaller chunks which is something I know I should have done from the get-go but you know I goes you know things but you still do things your way so well I hope you enjoyed the video if you watched it or if you save it for later out that you really really gonna enjoy that tutorial I spent a lot of time creating it but actually I had a lot of fun doing it the second time wasn't the most fun but actually once I was into it you know it was it was way easier so all that long so just to let you know what happened behind the scenes because that's the kind of thing that happens and man I'm shaving my head but if I had a lot of hair you know I would have pulled my hair you know when I realized that I had to redo everything again so have a nice day have a nice night have a nice weekend have a nice week and a see you soon [Music] [Music]

Channel: Kaycinho The Digital Alchemist

Views: 46,554

Keywords: sticky vertical menu elementor, sticky vertical menu wordpress, 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: 1cScCjyAwJE

Length: 69min 50sec (4190 seconds)

Published: Tue Oct 22 2019