Elementor - Fixed Sidebar Vertical Menu/Header with NO code

hey how you doing we had a request from someone who wanted to do a fixed sidebar now there's tons of videos out there and really cool ways of doing it some with a bit of code some without some using some additional plugins i'm going to show you a way of how we can have a sidebar fixed to the side of our screen so as we're scrolling up and down that sidebar stays in place and the way i'm doing it isn't going to satisfy everyone but i'm using a method that has no code no additional plugin and basically anyone can do it so stay tuned to see how we do it [Music] there's a few steps we need to cover up what we're going to do is we're going to create a sidebar header we're they're going to stick that into another template and then that template will go and sit on our page and it will basically fill up the sidebar and we can use it however we want okay and it might sound complicated but it's not just three steps okay no code okay no javascript or any additional plugins or anything like that we go to template and we click add new now this is just gonna be a section the second template will be the header okay bear with me on this we're going to create a section and i'm going to call it um i'm going to call it single header i'm going to call this content this is where we're now going to create one section and this will contain the contents for our header or the sidebar we're just going to pick one section and we're going to make this a full width no gap the key bit now is the minimum height make sure it is a vh100 what's the importance of that it means that no matter what device you're looking at it will fill the school well the full height of the screen you do minimum well if you do this one here fit to screen it won't work all the time you sometimes get a bit of spacing at the bottom whatever and it's really really annoying so make sure you do minimum height 100. what you also want to do is set your background color you could go for a gradient or an image i'm just going to go with a white background and the last thing i'm going to do is just drop something in just so we've got something to play with in fact there is one more thing i need to do in our section uh get back to our section just make sure you got your column position set at the top just so everything is nicely at the top there now i'm just going to mess around over here with the margins and padding i'm just going to give it about uh we'll go with about uh 30 from the top we'll go 30 from the bottom and i will do something like uh 20 no no we'll go for a bit more from the right we'll go 40 from the right and 20 from the left there just so it's not too tightly up against it we're now going to update this now remember this is just a section header so this header well this content is not a header sorry let me get that right it is just a section what you now do is when you go back into your template you'll now have the short code over there we're now going to stick that shortcode into an actual header so this is the content this is where we're going to add things in and i would say keep that open on another screen because it saves you jumping around a lot we're now going to create a new header we're going to call it header and we're going to call this one single header holder the content is the content the holder is the holder of the content hope that makes sense we're going to create a template now i'm going to pick a three column section and this will make sense in a moment okay in fact you could do two columns to be honest we'll go with two column okay now this section i'm just gonna make it a full width and i'm again gonna say no gap you do not set the height here okay you don't do any of that all right you can if you want again just to be safe go and put your color in again for your background but i would say the single header content does it now here's what you need to do you go and grab the short code widget drop it into column one or column two if you want your sidebar to be on the right hand side and drop the short code in and look instantly it's there with the padding with the wording with what we created now why did i have two columns right when you're viewing this on a desktop great tablet and mobile though do you want it to really be eating up your estate on your page no this is where you're actually going to need to use something else so if i go to my section over here and i set this layout to be a vertical line of top what i'm going to do is i'm not going to do it properly i'm just going to drop a nav menu in okay you could drop in an image drop whatever you want in sort out your styling and how you want to do it because what you really want to be thinking about is this column here if i click it and i go to advanced and responsive i want to hide it on the tablet and the mobile whereas this column over here i go to advanced and responsive i want to hide that on the desktop but activate it on the tablet and the mobile so when we look at responsive mode that it will be activated on the desktop but on the mobile mode that won't be visible and you will instead have this and you can mess around with the layout and how it looks so you'll have a different menu structure logo social media icons whatever you want to go for okay we're focusing on the sidebar here so i'm not gonna really do um i'm not focusing on the mobile version of that because that that's you gotta mess around with that yourself okay that's simple if you're used to doing mobile versions of a page now the last thing we need to do is on this short code remember you got to click the short code okay we've got to go to advanced we go to positioning and we're going to set the position the width to be custom and i'm going to give this a width of 250. no we won't go with that we'll go with 300. we'll go with a 300 pixel width okay i'm then going to go down to position and set this to be fixed this is now going to be fixed wherever this is activated on the entire site on or on particular pages now remember this is where the content sits this is the holder you can't really edit it because it's a short code so if you want to edit it you'd go over here but this is the holder and we've now set it to be 300 pixels and if you look down here it is stuck to the left hand side or it could be stick to the right i mean top and bottom is a little bit neither here and there leave it at the top for instance right now what we're going to do is publish that and this is where you add in your condition is it going to be the entire site but because this is my test website and i've got tons of headers and footers and stuff activated i'm just going to get this to activate on a test page that we're going to call vertical uh i could use one of my other pages no we'll go with vertical we'll go with vertical and i'm going to hit save and close okay so that is now activated let's go to the vertical page and there you go we've got the vertical page and you can see there can you see the hash is missing because we've got this with the white background that we did on the single header content it is now coming through right so now we have this single bar and then we have our page over here now here's where i deviate from what other people do with css coding or javascript or things like that i know that the width of my sidebar is 300 pixels so i'm gonna add in some content over here let me show you what would happen if we just added in a standard two columns here section and i set this to be a full width okay and i'm gonna go with no gap i am intentionally going to drop in some text like this and i'm going to increase the text now at the moment the text is going behind the header which looks totally odd because it should not be visible right don't be fooled by that because if i now update this page and we preview it it's not can you see there the wording's been cut off because this is a white this is a section with a white background it's just a little bit annoying the elemental still shows you it but what i wanted to get across is that even though we've got a fixed bar of 300 the content is still going behind well this is so simple and easy to sort out if i go to my section right and i go to my advanced and i go to my padding for the section i'm just going to go to my left and i'm going to type 300. i am now 300 away from the bar now let's start doing the content as per what the request i got came in and i'm going to try and fly through this now because right now we have got a sidebar and i i promise you if i just duplicate this and duplicate again like that so i duplicate duplicate duplicate and i update it and i go over here watch what's going to happen right as i scroll up and down that sidebar is stuck in place it's not moving anywhere and that's the beauty about it okay um which and again mobile and tablet you wouldn't have that but on the desktop it is now stuck in place you haven't even got a scroll bar up here as long as you make your content fit you know you should be okay now let's just make this match what my user wanted or the request i got i'm gonna go to my single header content and the first thing i'm gonna do is add in a border at the top okay and you don't have to do what i'm doing here by the way okay i'm just showing you a way of doing things i'm gonna make the top border be about five ish pixels and i'm gonna give it a orange color something like that like a dark orange color look you can see it there okay we just got a bit of a border if i now update that and we go to our page and refresh it can you see we have a border at the top there i'm going to increase it to be about uh i'm going to go back to that border for the top of that it's basically a section i'm going to make it about 10 just for the sake of it okay i'm now going to add in a divider line like so okay and i'm now just gonna make in fact i'm gonna get rid of the padding on this section okay like so uh like so like so like so just gonna get completely get rid of that and i'm gonna mess around with it internally within here i'm just going to make this be uh about uh 10 as well in terms of weight and i'm going to make it a lighter color like that and i'm going to say there is zero gap come on get down zero zero gap like that so if i now refresh the page on my vertical i should get a dark reddish orange line and a yellow line like that straight at the top pretty pretty simple okay nothing nothing majorly and the great thing is i'm not touching the holder i could literally close to hold a bit down if i really wanted to um or i could go in to it uh the column and this is where i could set the padding up now but i don't want to do that because if i do any padding it will affect uh the bars i've got at the top there so i did a top border and i did a divider line okay um the next thing we're going to do is go over here and i'm now going to get rid of this text and i'm going to now drop in a image uh where's my image gone no let me drop the image in first because i kind of lost things a bit there i'm now going to pick an image and we'll go with this person over here i don't know who they are if you know who they are please contact them and say i've used their image it came as part of one of the templates and stuff i was experimenting with i'm gonna make this be about uh 100 something like that so i've now just i've given it a width of 100 i've changed the height to be about 100 as well in fact i'm going to go with 125 110 and i'm going to make this be a cover like that so what i've now got is a slightly like skewy kind of pattern going on there but there's a reason i've done that is because it's similar to what our client or uh the person i'm working with was after purpose i've changed the border there so it's not like a complete circle kind of thing but that's kind of like the pattern they wanted and i'm going to drop the saturation of the image now just to be a gray scale like that i'm going to set this image to be on the side now at the moment is bang on against the left okay when i go over to this image and i'm gonna say from the left go about 30 pixels inwards from there and i'm just going to update that now this header that we have over here in fact first going to do is go to the image i'm gonna go to positioning i'm gonna make this a custom position i'm gonna go to the header and also make that a custom header as well in terms of the width so now they are side by side and i've made the vertical align middle and now this text over here i'm going to change this to be um a sidebar fixed like that and i'm just going to change it to be a darker font we'll just go with black for now and i'm going to change the text to be orbitron it's my favorite one you know orbitron at the moment i know not everyone likes it but hey i like it and i'm going to go with that and i'm just going to drop the rem to be about three no two no 2.5 2.5 we'll go with that and i'm just going to give it a little bit of spacing like that now at this point here i'm pretty sure that is over 300 pixels okay so you could now say maybe we need to just shrink the wording or we just play around with it so i'm going to give a bit spacing of about 20 away from the image and i'm now going to change in fact what i'm going to do is i'm going to put a return in there so we've got a bit of a header going on there okay now when you are viewing this don't be too worried at the moment because the orange lines have disappeared at the top is because i'm in a preview mode but they are there but the key thing is is can you see the title has kind of gone over so the 300 pixels now is either not enough or i've got to change the wording so have a think about do you change it here in your single header holder when you go to um the short code and you go to the positioning do you change it here or do you go to your content and go right okay we're gonna have to do a bit of a we're gonna have to do a bit of a change there let's put it down to two and you might find that you are kind of doing a bit of back and forth testing but once you work out your whip that's now okay i mean i would probably say that any content on this page rather than it's starting at 300 it needs to start at 3 20. so every time now it's i mean of course i didn't do it here let's just do it there let's just copy that let's do the paste style there and let's just do the paste style over there so now right we're kind of accommodating the width for that and how that looks i'm going to go back over to my content over here let's go back to our section let's go um now i am going to add in a bit of styling to the right hand side so i'm going to go to my style over here we already have a border but what i'm going to do is do a box shadow as well and this box shadow i'm going to make 10 pixels so 10 pixels goes to the right if you do minus 10 it goes to the left and it would come out uh on this side over here in fact i won't do 10 it's actually going to be about 2 and i'm going to make this a solid black you can't see it at the moment okay don't worry you can't see it at the moment now in terms of blur there will be zero blur but it is going to be two pixels kind of thing to the right no you're saying we cannot see anything of course you can't but if we go over here and i hit return now reload the page you will see a black line there we go so now we have a black line coming out over there um you might want to say that's not looking great over there but i'm not going to lose sleep over that but what we now have is like a fixed bar again play around with what works for you and again this is the point when you might go um you know what that's now looking again too close so let's just make it uh 340. okay i'm not going to do it for all of them i better do it though shouldn't i because if i don't yes someone's going to pick up on this and go oh it's not in line you lied to us be gone right so remember this is where you're gonna have your contents we've got a sidebar we've got a fixed okay cool let's update that i've just dropped in a search underneath i'm gonna go to my advanced i'm gonna give it about 20 20 pixels away roughly from that and i'm going to say from the right it's about uh we're going to go 25 and from the right hand side we'll say give it about 40 so give a bit of spacing away from the side you could go with 20 to be honest let's now add in a form okay so this is something someone asked me how do i create something like this so i'm going to go in i've added in a form i'm going to give it about 20 pixels away from the top for the form i'm going to get rid of name and like that i'm going to get rid of the label as well i'm going to change leave the email as it is go to button and i'm going to change this to say there it is i'm going to say sign or send would work better to be honest because it's a lot smaller so in fact i might just put sign no we'll do sign up okay something like that i'm going to change this though to be 20 of the whip now when we actually view this on out of 300 pixels that might be too tight but we got to test it out we'll go with 20 for the form for the email we're going to change that to be 80 so now what should happen is they should go against one another go to my advanced i'm gonna put the left to be uh 25 and we'll go with uh 40 as well over there and you might now want to play around with your pixels and whatever but look i'm just showing you how we can do stuff okay so let's go over here and i'm gonna just change this to actually be about five so it's gonna be slightly below the email there now this is where i'm not gonna do everything that was requested because this is gonna start to be like overkill but if i just now stick in a header here and i make this header be about 40 away uh 25 from the left and 40 from the right and we're going to give it a black font and we're just going to make it a uh we'll leave it as in fact we'll leave it as a railway font railway railway i quite like railway uh we'll go with a 500 uh now we'll go with this 500 year waiting rem will go for about 1.8 i think no 1.5 we'll go with that but i'm going to drop it to 600 and i'm gonna change this to b header one so this might be like a group of items so we're gonna have header one okay and then underneath that i'm gonna put in some text so the advanced for this is again i'm just gonna say uh left is 25 40 from the right and this is where i might put um about for instance or uh services or um whatever okay and each one of these i might hyperlink to another page so i might go over here click it and say right this is to go to the about page i don't know if i've got an about page on here i haven't got an about page hi i'm imran let's just do that okay so that is now going to hyperlink to the page this is where you will have to maybe um either change your site settings or just change the color of the text okay so it is a hyperlink it's just a standard color you go to your style do your typography okay your font size and everything like that i'm just going to go with rem and go with about one point sometimes one is fine 1.1 1.1 1.1 will do that and in terms of the letter spacing sorry not the letter spacing the line height this is where you can just start to mess around with how's it looking now now the only reason i've done this is because i wanted to demonstrate how i could duplicate this uh pick it up and drop it below duplicate that again and pick it up and drop it below so i might have a header too and some other information and things that sat sit down there i could even do uh social media icons and i'm just gonna now rush through this really really quickly column three we're gonna go with circular you change your icons you know look same drill 25 uh you know however you want to do it you know put maybe like 40 from the top whatever you want to do okay you play around with it okay um okay i say okay a lot i say okay right yeah things like that change your color scheme custom you know do what you want to do okay i'm just i'm again i'm not i'm trying not to i don't want to get too carried away with um how i do things over here why did i do that uh because i want to do the hover color remember the hover color primary color here we go right so when you hover over you get a different color so i've just rushed through a layout remember this i mean this will change by the way if i like refresh the page because it's feeding from the single header content the single header holder just looks like that if we now go to our vertical page right right right in fact you know just to make a point let me drop an image in here uh let's go with uh let's just go with uh something like this uh no that's rubbish actually let's not do that let's do a let's get rid of the image let's do a column image so i just want to like demonstrate how useful this all is right so let's just do that something like that i don't know cover you know whatever you want to do um let's just drop in um like a map over here okay and down here let's just drop in some i don't know let's just put some buttons over here insert gallery all right let's just go with a grid masonry uh and we'll go with uh two columns right in fact we'll go with three columns no i said three we'll go with three column gallery just something like that okay and when you now view that private page over here right i mean look this is now a fixed sidebar and there's no css coding there's no extra plugins um yes you could say i'm cheating a little bit because i'm just dropping in a template and i'm ensuring all of the content is 340 pixels away from the left but it works and that means you've got a sidebar that is always fixed in view and when you go to the mobile mode view or tablet this will disappear and you'll have a different menu at the top so you're covering all bases look i hope you found that useful i hope you were able to follow that and experiment to have fun and of course you know make sure you've got some padding and whatever within there i've just rushed it through a bit just to show you how we could do it but i hope you found that really really useful like subscribe share and follow and i'll see you soon

Channel: Web Squadron

Views: 1,552

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, Elementor - Fixed Sidebar Vertical Menu/Header with NO code, Elementor vertical, Elementor sidebar, Elementor Menu header, Elementor Fixed Sidebar, Elementor Vertical sidebar

Id: ifpR8-Ilb6Q

Length: 23min 33sec (1413 seconds)

Published: Fri Nov 12 2021