How to create a Transparent Sticky Header in WordPress with Elementor

hey and welcome back to living with pixels in this video we're gonna create a transparent sticky header so when you scroll the header becomes smaller and there's a background that will change when you start scrolling you can see the logo also becomes a little bit smaller this also works perfectly on mobile phones as you can see right here and this also works on a white or a lighter background like this so then you can transform the menu to a white version if you have a dark logo for example and you want a clean white header so let's just get started so what we're gonna do in this tutorial is we're gonna work with this test page which doesn't have an header like you can see over here so let's just go to the elemental protein builder by the way if you have never worked with the elemental protein builder then you should watch my basics video in the description is not a video for complete beginners this for people that already know a little bit about Elementor so what you need to do is you need to create a header template so what I'm gonna do is we're gonna click on add new select your header and name it something v2 I'm gonna call it a tutorial right now click on created the template alright click this away so you can set up your menu in whatever way you want for this example I'm gonna create a wide menu so that means that we won't see a lot on this page because it's gonna be white on white but when we click Save and we adjust it to this page then we will see what's happening so to keep things simple for this tutorial I'm gonna create a super simple header with two columns with a logo on the left and a any menu on the right so create two columns dragging your logo now I'm gonna select a white logo as you can see over here click on inserts make sure the alignment is on left but don't change anything yet in the width or the max width because that's what we're gonna do with CSS also drag in your menu so you're never menu widget like this make sure that you have one menu that you can select from here you can create that from your WordPress menu screen over here again if you are a beginner there's a basics video also about the basics of WordPress if you don't know how to create a menu let's tell this a little bit okay so i've made the main you white because our background is dark but as you can see it's not made of a line so what I want you to do is click on the column and then put this column vertical alignment in the middle now it's a middle line and also do that for this column so go to the first column vertical alignment middle also what you want to do is always uncheck the padding so it's left aligned in the corner and there's no padding on the inside of that and also do that for this column so let's see what we've created so far click on publish I'm gonna add this menu to that one single page just to test this I'm gonna assign it to my new page Ben tours tutorial click Save and close go to your new page click on refresh and as you can see now it's not transparent so let's first make it transparent so what you want to do is click on the whole main section go to advanced unlink this one and then we want to apply negative margin to deep bottom and in this way the content beneath it will move up so if you put minus 90 over here the content moves 90 pixels up but we haven't tailed Elementor how big the menu actually is so what we also need to do is go to layout go to Heights minimum Heights and put that also at 90 okay so now if we click on update go back to our page click on the refresh you can see that our menu is now transparent that's cool but now our logo is gone what's happening well we also need to change the Z index or the Z index so if you click on your main section again go to advanced and the Z index put that all on to at least two or maybe ten if you want to be sure because that is the layer so what layer is on top like in Photoshop or Premiere Pro or whatever other creative tool so now if you click on save click on refresh and now we have our whole menu which is transparent okay so the first step that we need to do and to make it sticky is scroll down go to motion effects make sure your are in the main section and then sticky put that on top so click on update again go back and see what happens see now it's sticky that is nice so now we're gonna add our first line of custom CSS so scroll down go to custom CSS and here we're gonna paste some code I've combined the code of two videos actually in video of and a blog post that I found so I think I'm the first one on YouTube to to show you this that's pretty cool so the first code that you want to copy is this section I will explain you what this is so just copy it I will put that in the description of this video so click on inscription you could just copy and paste it if you paste that over here what happens is that this applies a RGB sort of the color background to this section to the menu section and then it will also give it a nice transition of one second that is what I think is ideal for a menu like this but now what happens when you click Save you go back to your page you click on refresh you can see that it's already applied from the top which is not what we want because we want to start with something transparent so then we can go back go to Advanced I'm sorry go to motion effects and then put this effects offset at 100 and that means or not 2100 so that means that this effect will start at 100 pixels so now if we click on update go back to our page click on refresh we will start with this background and then when we scroll it will show that background also if you want to change the opacity of this maybe you want to make it fully black what did I need to do go to custom CSS and delete at 0.5 because that means 50% opacity okay so maybe if you want to put that at 0.7 click on update again go back click on refresh and now you can see it's a little bit less transparent but sometimes you want that for visibility ok so now we want to make it a little bit smaller because the logo is is huge in a lot of cases you also want to make the menu a little bit smaller like I've done with this version as you can see it's just a little bit nicer because the menu doesn't have to be so big because with a lot of those cool transparent headers you want to have more margin over here then the margin that you would have with a background menu ok so let's just do that right now go back go to your custom CSS add a enter ok and copy the next part which is the height so the change in height when the 100 pixels is reached so also paste that so that means that the header will change to 70 pix also from 90 to 70 we start scrolling again with a one-second ease so that's an animation click on save then go back click on refresh and now you can see that the menu becomes smaller but our logo is still massive so that's the last piece of code that you need to paste so go back to text edit and then copy this one make sure you press two times enter one time and then press update so what this means is that the logo image which is this image will have a max width of 140 that's the starting point and then it will go to 120 with a 0.5 animation so let's see what happens when we go back and we click on refresh and then nothing will happen because we have used an ID and CSS idea which is dot logo so we need to tell Elementor that this is called a logo because Elementor doesn't know that this is a logo right because it's just an image for alimentar so if you click on the image so click on that pencil go up click on advanced CSS class and type in logo here so in this way you tell Elementor like hate this we call this a logo and then apply this file to that logo because that's the code but that we've just pasted it ok so now if we click on update you can already see it preview over here go back to Japan doors and click on refresh and now we will start small and it will become even smaller when we start scrolling that is pretty nice and if you want to make that animation fit what you need to do is go back and also change oh I'm sorry I need to click on any section and also need to change this to 1 second and then everything will be animating at the same time so go back click on refresh and now you can see that looks absolutely smooth let's check mobile real quick before you're gonna click Save and send it to your clients right so check mobile and see what happens here okay so for your mobile what you want to do is you want to make sure that the menu is on for example on 50 and also the column if your actual menu is on 50 and of course you also want to tell it this icon because now you can see it right so this is called the toggle button background color put that on transparent but the color itself put that on white in the example right but if you have a white header of course you're gonna change it to another color and then you want to make sure that this also is right aligned and I make sure that you have a little bit of spacing on the inside of your main section so go to advance unlink this with 20 on the left its when you on the right like this okay make sure this looks good you can also change the colors of this like I've done in my example as you can see right here I've changed that too to black but again this is not a tutorial to tell the whole menu this is a tutorial for a tad sticky header so now we are done I'm pretty happy with the header it looks pretty cool if you have any questions then please let them down below again the code is in the description if you have any other ideas for new videos and please let me know in the comments down below and then I want to thank you for watching if you want more videos about how to start your own web design business then you can subscribe if you want to and I'll see you in the next video hopefully alright [Music]

Channel: LivingWithPixels

Views: 163,321

Keywords: livingwithpixels, Elementor Pro Header Tutorial, elementor sticky header, elementor header, wordpress elementor, wordpress elementor header, wordpress elementor menu, elementor sticky, sticky transparent, sticky transparant header, sticky menu, transparent header elementor, elementor menu, elementor pro header, wordpress header, elementor transparent header, transparent sticky header elementor, sticky header scroll, sticky header animation, transparent menu

Id: o24U8d0Mosc

Length: 10min 13sec (613 seconds)

Published: Mon Jun 29 2020