Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜

hey hamza here and welcome back to the channel now this is a very different video because it's one of the highly requested videos on this channel simply because a couple months ago i released a tutorial on how to create headers and footers using the free version of the mentor however most of you have always wanted to also create a sticky transparent header in the free version of elementor and that's why i'm making this video but not only that i'll also show you how to shrink your head down scroll change your header background color shrink your logo or even change your logo color on scroll but before we dive into that please if you like this video give it a thumbs up and if you're new to the channel please subscribe i'm also releasing my beginner toolkit for beginners in wordpress that i think you wouldn't want to miss out so go and subscribe to my newsletter so that you don't miss out getting a copy of this toolkit now let's jump straight into the video and get started the kind of header we are going to create is going to look just like this over here it's transparent and on scroll it's going to get sticky and it will also change the color i'll also share with you some tips and tricks on how you can even shrink the logo or shrink the whole header and also in case you want that the header only appears after a percentage scroll or even when someone is scrolling back to top that's when the header or the sticky shader should appear so to do this we are simply going to head back to our wordpress website inside our wordpress website i'm going to open up my home page this is the hero section for the home page and i'm simply going to come over here to the style uh background type and i'll just give it you know a background color something like that now when i come back over here to the good books website or to our website you realize that we actually now have a gradient and now our header will be seated over right here now let's head straight to elementor and now we start creating our header which is going to be transparent since we're using the free version of elementor we are going to use another plugin that is going to help us to create our header and that header will be created using a plugin called elementor header filter builder which is also made by astra as you see over here we only have elementor the free version and then the element ahead of footer builder which is the plugin that is going to help us to create the header and then we are going to add another plugin called the elementor sticky effects so i'm simply going to come over here to plugins and i'll add a new plugin i'll search for sticky effects elementor it's a free plugin and gives you a lot more other customizations that you can achieve with it so it shows up over right here sticky header effect for elementor i'll install without this plugin it means that you'll have to play around with the css of the header but as you know this channel is not for techies and i simply want to show you the easiest way to do things without actually attaching any line of code and that's why we're now having to install this plugin otherwise we would have to add some css to our elementor but then again we will have to use the elementor pro version because that's where we can actually add custom css once it's installed then we are simply going to activate the plugin now let's head straight to our header photo builder to create our header so we're going to come over here to appearance and we come over here to the header footer builder plugin we're going to create our header good books header so name it good books header and it's going to be a header and we want to display it on the entire site but then we're simply going to say publish now once we publish it means that now this header we are going to create will be displaying on the entire website now head over here and then say edit with elementor now this will take us to the elementor editor to begin creating our header i'll add a section which is a two column section then i'll i'll come over here drag our heading widget which is going to represent our logo you can even use the site logo widget which is over right here so let me say delete this come over here and then we grab the site logo widget make sure that the site logo widget you choose is from the header footer build that is if you want to display your site logo that you already uploaded under your theme but in this case i'm going to use the site title so just come over here and then i use a site title and then i'm going to come over here and then i add my menu so i'll just search for menu make sure that the menu add is from the header photo builder drag it over there so now we have our menu and then we have our site title so i'll just come over here to the menu and i'm going to increase a little bit on the font size so just make it like 20 let it be taking over like 70 percent and then i'll align the menu to be on the right hand side so i'll come over here to the content layout and i want it to be on the right hand side and i want this to be boxed yes which is boxed now it looks like we are done now what we are going to do is first of all we are going to give this header a background color and then also like uh increase on the height in this case we are going to give it just a normal background color then we're also going to you know add some padding to the top and bottom so unlink this give it a padding of am1 top and then padding a m1 at the bottom so i'm simply going down to update now i'm going to come over here to my site when i reload this you realize that the new header we've just created will now be appearing on our site over here there we go we have our new header now when we come over here and we simply just preview the site or the new site you realize that now we have the new header appearing on our existing website now this is a good step to start we want to make sure that this header doesn't have the background so we want it to be a transparent header so what we are going to do is simply now come back over here to elementor select this whole section which is for the header come to advanced and you will see an option called sticky header effects now this option only appears if you have the elementor sticky header effects plugin installed and activated now once you have it installed and activated just like i showed you you're simply going to enable this then you have the option to enable this sticky header on one desktop tablet and even mobile devices for now i'll leave it as it is because i would want it to appear on those devices down below here we have to choose the scroll distance to enable the sticky header effect so in this case i'm going to make it 200 for me so 200 now when i update so now let's see how our scroll distance to enable the sticky header looks like so when i scroll down 200 pixels that's when our sticky header now shows up now how about if you don't want it now to stay having this background over here that we gave it what we're simply going to do is come back over here and we are going to make it a transparent header simply update cool now we have our transparent header appearing now on our website when i scroll down now we have our sticky header now how do we make it to be a sticky and transparent header so to do that we're simply going to come back over here select our header then come straight here to the style come to the color option where we actually added the color for this the background color for this header and we're going to reduce a little bit on this color to give it a little bit of transparency we simply now update after update come back here to my page boom now we have a transparent header and it's going to turn sticky and then also transparent if you came here to look up on how you can create a sticky transparent header there you go we have created our first sticky transparent header for this website you can also reduce or even increase on the transparency of the color you can make it more you can make it less and when we head back to the advanced option remember to select the whole section for the header come to sticky effects under the option for the background color you can choose to change the background color to another color when you're scrolling so how does that look like when i enable this then over here i can select the color so i'm going to simply just choose another color here and i can also give it a little bit of transparency for that color and then i'm going to update on update i come back here to my website you realize now it's a totally different color when i scroll now it means that it has changed from the original color that i had selected for the header if i hadn't chosen to have a transparent header for this header by simply turning off the transparent header here we would have this color for the header and then on scroll the color would actually change so this is how it looks like now by default we have our header with the original background and now when i scroll down 200 pixels boom now the color switches to another color on scroll or to another background color on scroll what else can we look up into this we can shrink the header so when you look over here our header is a little bit taller so i'm going to shrink it to a certain percentage on scroll so how do we achieve that i'm going to come over here to shrink header i enable it and then i'm going to simply just say so maybe 240 pixels so i'm going to update this i load up the site now when i scroll down below here you're going to realize that now our header has reduced in the height and that's how you can actually achieve shrinking your header in the free version of elementor without even adding any single css code now let me head back straight here then i turn on our transparency effect because we want it to be transparent even at the home page so i simply just update over right there so we can still have our transparency effect okay so it's transparent on scroll it shrinks and also changes the color we also have another option of actually blurring this header for example over right here you can say blur so that whatever is at the back of this header looks a little bit black you can't really identify it what you do is simply you can simply just turn that on over here when i update come back over here look into our header then i'm going now to scroll down it's not really as clear as it was without the black you can further reduce on the background color on scroll opacity or transparency so i can just further reduce over here so that you can have a feel of the real effect of the bla on the below sections when you're scrolling so i come back here scroll now boom beautiful look over here on the button also over here on the book actually this looks like a sweet gradient further down look at this guy also really blurred out then the other options that you have you can still shrink your logo you can change the logo color on scroll the other option i found interesting was hiding the header on scrolling down so if i enable that over here i can choose how many pixels that a header will be hidden when i'm scrolling down first of all it will be a sticky header but once i continue scrolling down to a certain percentage or a number of pixels then the header will actually disappear so when i add over here like 600 pixels or 700 pixels so when i scroll down 700 pixels the header will actually disappear the stick head i mean so when i come back over here i'll start scrolling and boom it disappears now once i'm scrolling back then the header reappears on my page see how that looks like now let's look into the responsive options for example on the tablet you can of course choose how your menu is going to look like align it to the right let me show you how that looks like when i come over here to our homepage actually i go to the tablet mode you see how our header looks like of course it disappears at some point when i'm scrolling down because that is the setting that we put up now when i'm scrolling back up it reappears let me just head back over here and disable that option sticky effects and for specifically the header on tablet i'm going to disable that so that it will say sticky as long as i'm scrolling down on the tablet so i come back here to our page i reload our home page to the tablet option so tablet here i come it will stay sticky through out when i'm scrolling down this whole website how sweet is that okay now the same we can do for our mobile version we can come over here select the mobile logo will take up 70 and then for our drop down hamburger icon it will take only 30 percent i can simply now update go to the mobile i scroll down our sticky header shows up over right there and even i'm able to look into the other pages i can come back here to the home page also all the other pages for example when i go to the about page ebooks page still our header will stay transparent and sticky all over the whole website because that is what we actually set up when we are creating our header using the elementor header footer blocks plug so in a nutshell that's how you can create a sticky transparent header in elementor the free version and also you are able to change the background color on scroll you can also limit how far the sticky header will be shown on your page at the same time you're able to even shrink the whole header change your logo color shrink your logo color or even shrink the whole header on scroll if you're into the channel don't forget to hit the subscribe button and if you like this video please give it a like because that actually helps me out thank you so much for watching i hope now you have an idea on how you can actually create a sticky transparent header in the free version of elementor if you have any questions or comments please let me know down in the comment box below otherwise i wish you the very best thank you so much for watching have a good time and good bye

Channel: GO TECH UG

Views: 14,084

Keywords: Free Elementor Sticky Transparent Header Tutorial, elementor sticky header effects on scroll, elementor sticky header change color on scroll, elementor sticky header change logo, elementor sticky header change menu color, elementor transparent sticky header, elementor transparent header, sticky header on scroll wordpress, GO TECH UG

Id: -fMpH_aKRcI

Length: 14min 51sec (891 seconds)

Published: Mon Feb 15 2021