How to create a Blurry Transparent Sticky Header in Elementor - Easy Tutorial

hey welcome back to liverpool pixels my name is reno and in this video we're going to create a transparent sticky blur header so when you start scrolling you see the items through the actual header when you go to a white background it turns white and it looks really cool and at the top is just a nice transparent header this of course also works on mobile phones as you can see right here this is a big trend in web design right now and in elementor pro is really easy to do so let's just get started and to make it super easy for you i have made a page with all the instructions and everything that you need so i will put this link in the description and you can see the code that we're gonna copy and paste you don't have to worry it's just copy and paste it's going to be super easy but you need to know where to put it so what we're going to do is we're going to go to wordpress and let's login and what you need to prepare for this is a menu of course have a menu that you can work with because in the final result there is a simple menu you need to set that up over here if you don't know how to set up a menu make sure to watch my basics video on wordpress this is not a video for complete beginners but for people that already know the basics of wordpress but you can watch the basic tutorial if you don't know how to do this so i have a few pages over here this menu is called menu1 and we're gonna use that we're gonna apply the header on a page that i have over here so this is right now the page that has that transparent blur header but in this tutorial we're going to apply the header to this page which doesn't have a menu yet as you can see it's not even transparent so we're going to use this page for the header so what you want to do is you want to go to templates go to the theme builder and click on add new we're going to create a header template and i'm going to call this header version 2 because the demo is version 1 in my header and click on create template we're not going to use this click on the x and for this we need three columns normally you would click on this but i say click on the first one then delete the padding on the inside of the first column and then duplicate that column two times because we don't want the standard element of betting inside of it so now we have three columns inside of one main section now we want to apply some height because as you can see in the final result this header is pretty big it's actually a header that goes from here to around here that's the height of the header and then we're going to make sure that the content will go beneath it and then we're going to apply the blur when you start scrolling so what you want to do is you want to go to height and set the section on minimum height we're going to use 135 so 135 as you can see a very big one and make sure that the vertical align is on middle so that the items will all stay in the middle since we're working on white and we don't see what we're doing we're going to add a temporary color on the background click on classic and then make sure to pick a black color but don't put it on completely back otherwise we can't see what we're doing put it on half or something like this that's just temporary for now now you want to go to the advanced tab and you want to make sure that the content of the page will go beneath it so we need to do two things over here first we have to say to the margin that we want to apply a bottom margin and that means that everything that is under it will go up because we're going to use a negative margin so if you use a 100 over here then the content as you can see will be pushed down but we want the content to go up so we're not going to use 100 but minus 100 and now the content will move beneath our header so we're going to use the exact same height over here 135 and we're going to put the set index on 10. why well the set index are kind of like the layer so set index 10 means this is going to be the top top of the layer actually the 10th layer there are no layers yet on this website but if you're gonna add a few elements and use the numbers two three or four you always know that number 10 is at least on top if you're going to use more than 10 of course then make this higher i'm not going to put it at 10 so we always know it's on top now let's add a few elements and see how far we've come so i'm gonna add a menu over here i'm gonna drag the nav menu widget into here here we see our big menu i don't know why it's so big maybe that's because of this theme let me tell this real quick and here's a little detail i want you to notice because on the final result these three items are transparent so you see the video through the text it's a small detail but it makes the experience a little bit nicer so i'm going to show you how to do that for the normal you want to click over here and then put it on white but then make sure that the transparency is something like this 75 approximately then in the hover you want a pure white so the text color white we don't use the pointer over here because i've put that at zero we don't want the pointer on this website and then the active one you also want to put that at white so then the normal page is white and then the rest is transparent so you you see the video beneath it or any content that is beneath it then i want to add a logo for this website i'm going to use an image and then an svg image as you can see over here i've used an svg you may get a pop-up when you insert it that you need to allow svgs to be uploaded on the website and then on the right i'm going to add a simple button for some reason my svg is not showing up here but what we're going to do now is we're going to test this header so far so i want you to click on publish and then elementor pro will ask you where you wanted this menu for now this is a test for me so i am going to put it on one specific page but for most websites you can just pick entire site but you can also choose to only show this cool header on the home page and have a more simple header on different pages so what you can do over here you can go to singular and then say like hey i want this only on a specific page and i want this on the tutorial page so home for tutorial i'm going to click save and close and now let's go to our page this was the original page let's refresh it and see what happens and as you can see it is transparent we're going to remove the header and we're going to apply those effects and then we're done so let's add the final details first of all we need to fix our logo this is a problem that you might have so what you want to do to display your svg if you want to click on the svg go to style and click on the pixels or the percentage for some reason elementor doesn't display it right away probably because svg is a vector and elementor doesn't know how big you want it so what you want to do is you want to click on one of these and then set a width so elementor knows how big you want it so for example like this click on update go back to your page click on refresh and now as you can see it works the active state doesn't work and that is because we are on a preview page so if you want to see how that looks you need to go to your pages then go to the page where you applied your header to and it's still not here and that is because this page is still on draft so make sure to always have your page published so you can see how the active state looks and now it still doesn't work and that's because this page is not part of the menu so here are a few things where you can run into trouble here are your solutions so if you add the page to the menu via over here then the active state will become white okay let's now continue with the fun stuff what you want to do is you want to go back to your header template and go to the motion effects tab in advanced and first we're going to make it sticky because right now as you can see it's not even sticky so you want to make it sticky over here put it on top and then it should be sticky so if you click on update let's check it for now refresh and as you can see now it sticks to the top wherever you scroll to now let's also remove our background color because we don't need that right now anymore so you just can just click over here now you can see what we're doing that's why we had that background click on update check your final and now it's fully transparent as you can see and now you want to open that page and copy the css that i have prepared for you it's really simple just select it like this right click copy then go to your header go to the advanced tab make sure you are on your main section advanced step custom css and just click over here and then paste it and there you go look at that it became smaller and it has a blur so let's test it we're going to click on update we're going to go back to our page we're gonna click on refresh and as you can see right now the blur background is applied we're almost done this is super cool but as you can see it's also now when you are at the top we don't want that because we want to start with that clean look and then as as on the final website as you can see right here when you start scrolling then it comes in that is what we want so we need to do one more trick for that go back to your header template go to motion effects and make sure the effects offset so all the css that we just applied that little code will start at 100 pixels so 100 pixels from the top when you start scrolling you can even set it to maybe even bigger the same height as your header for example 135 doesn't really matter click on update go back to your page click on refresh make sure to always refresh with comment shift r and not just comment r because that is a cache refresh now you can see the blur is gone and when you start scrolling it starts coming in and the header also becomes a little bit smaller it's not as small as our final result and that is because there is still some height inside of our element so how you can delete that as well is go over here and make sure in the style tab to make the vertical padding zero and then there's no vertical padding over here we only need that vertical padding if we would have that pointer because that's the width between your text and your pointer if you have one like this you can see it's super big so put this at zero and also put the vertical padding on zero also if you want to delete this space because this frustrates me a little bit because i want it to be left aligned make sure that the horizontal padding is also on zero and then add space in between i almost always do this with this feature it's the same effect but then you know it's always left aligned to your 1140 grit let's try and test it right now go back and click on command shift r and as you can see this looks pretty good i'm gonna scroll the header becomes smaller and it has a blur super cool effect and this of course especially works well on these kind of backgrounds as you can see that's why i created this design so you can see how cool this is on a website like this with a video background and even buttons like this where you can really see it going through and with different sections with different backgrounds it's really cool one last thing before we're gonna end this video and that is that you can change the settings if you want to so maybe you think this this is too much blur you can go back to your main section to the advanced step custom css and then over here you can see the code that is where the magic happens of course so what what it says over here is that the background color should be 40 in opacity when you put this at 0.8 it's 80 opacity i've already set it so it looks nice on most websites but you can also change the settings over here to make it match your design a little bit more also for example the height of the header when you start scrolling you can increase that as well maybe make it bigger it all animates super nicely because it has that nice one second animation and that makes everything look super smooth and cool so i hope that you enjoyed this episode again all the information is always in the description if you have any questions leave them down below try to help each other if you have more ideas for new tutorials then please let me know in the comments as well and then i want to thank you for watching and hopefully i will see you in the next video on living with pixels you

Channel: LivingWithPixels

Views: 32,200

Keywords: livingwithpixels, living with pixels, sticky header elementor, elementor sticky header, transparent header elementor, elementor header, elementor transparent header, elementor menu, elementor pro, living with pixels header, sticky header, sticky menu, sticky menu elementor, header elementor, sticky header wordpress, sticky header effects for elementor, elementor pro header, menu elementor pro, elementor blurry header, blur header, blurry header, blur menu, blurry menu

Id: lW8MVPn7y54

Length: 13min 5sec (785 seconds)

Published: Fri Jun 18 2021