 Hey, what's going on everybody? So I am out traveling away from my studio. You might hear some background noises, but I still wanted to geek out and have some fun creating some more tutorials. In this one, we're going to be taking a look at transparent headers with Elementor. When it comes to building headers and other sections inside of Elementor, there are different methods that we could use to get the same results. And for transparent headers, I have two methods. Now one of them, the negative margins, that's been a method that I have been using since I've been building Elementor websites. But recently, I've switched to a new method, which I found to be a lot easier and a lot faster. And that is using position absolute. And then after I show you how to make your header transparent and lay on top of your banner, for all those that are new to Elementor, I will show you how I built this header and menu right here. All right, let's check it out. And here's our menu before it is transparent. Now you're going to notice that it's a purple background. And that is only because I went here to the site settings. And I changed the background to purple. This way, we could actually see it because I'm going to be using white text. That way it shows on top of the banner. So let me leave it purple for now. Okay, first step that you need to do for either method, all right, we're going to have to set everything up. And whether you're going to be using the negative margins or position absolute, we're going to do the same thing go over here to the container that is wrapping the header that is going to overlay on top of your banner, then you're going to go over here to advance over to Z index and give it at least a 10 or you can be extra safe and just give it 100. The higher the Z index, well, that means that is going to be on top of anything that is lower. So your banner is going to start off at a one. So the 100 will go on top. The next thing you're going to need to do is go over to your style and go to your colors and make sure you have a transparent color. Now you might be using global colors like this, you could just go to any one of your colors, I'll go to a primary, and then just move the slider all the way down to zero, then it is transparent. Next up, let's take a look at the negative margin options. So you go over here to advance into the bottom, and you're going to use a negative margin and you're literally going to pull up the content. And that's what margins do they push and they pull that is a difference between margins and paddings. Paddings, they add padding around the element where the margin pushes and pulls the element. This is usually around 70 to 80 or 90 right around there. So you would find the amount of pixels that is going to be flush right here to the top. If you do this right here inside of your header and pull it up, it's going to pull up on all of the pages. So you might not want to do this inside of your header. In fact, I wouldn't do it inside of the header. Instead, let me save this and let's go to our page. And you can do this page by page because some pages you're going to want this to overlay on top of your banner. And then some pages you're going to want this to be on top of your banner. And that is where this option is really useful. So I'm going to go over here to my homepage right here. This is a homepage banner. And okay, I got to use my navigator. So you're going to have to use a navigator a lot. But yeah, let's go here to the navigator. And I'm going to go over here to advance. And this is my container for my banner. And then here I'm going to pull it up from the top. Let me unlink that. And we're going to pull your pretty much pulling the header down over your banner. And that is your first method right here. But I got a better method to show you one that I've started using. So let me undo this. Let's go ahead and update this. And I'm going to go back over to my header. I'm going to go back over to the container wrapping the menu in advance. And I'm going to go over here to position and I'm going to switch it to absolute. When it's on absolute, just make sure that it's on the top right here. And that is by default. So we got a position absolute vertical orientation to the top in a Z index at least of 10 or 100. And that is it when we're using position absolute for our transparent headers. Now sometimes you might want to put another top bar like what I have here. And sometimes you need to make some adjustments too. If you find that it is not aligned, maybe it is being pushed down, or it isn't covering the banner enough. Well, then you could go here to your vertical orientation, and you could adjust this here, you could pull it down, or pull it up. And then you're going to want to check in the front end to make sure that everything is aligned and flushed. But most of the time I find when I leave this empty that it is right where I need it to be. But if not, it looks off on your end. This is what you want to adjust. Now this is a great method if you are going to be using this type of header across all of your pages. But if you're only going to have some pages with transparent headers and some with more traditional headers that are stacked on top of your banner, you might want to use either the negative margin and control the front end right here on the banner. Or you might want to create two different menus or two different headers, and then control them with the display conditions, because you could create multiple conditions, you could create the pages, you're going to exclude and the pages you're going to include. And that is it now for anybody brand new to Elementor, I want to throw in a little bonus right here and show you how I built this header. I'm going to delete these for this, I am going to use containers, I don't use the sections anymore, containers are much better. So let me show you how I do this with containers with the flex box containers. All right, I'm going to use the first one direction to the right. Let me set up my padding. I am going to change this to REM. And let me just put in one on top one on bottom. And then on the right and left, I'm going to do two. And I am going to keep my paddings my right and left paddings always the same throughout the entire site. That's how we keep a clean layout. Now I'm going to set up my background right here, you could put in whatever color you're going to use. And let me add in a heading. I am going to change this to a span. And let me copy and paste this right here. And I just put in some dummy text. Alright, and let's go ahead and style this up. So I'm going to center this, I am going to change the color to my black. And then I have my presets right here, I'm going to do this button text small, I think it's going to fit a lot better, or I could do medium, let me see here, I'll go ahead and do button text media, make it a little big so it stands out. And then here inside of the container, I want to click on the container, go to layout. And this is where I'm going to fix the positioning inside of my container, I'm going to put justify zero, I'm also going to align everything inside the center. Now, let's create a new one. And again, I am going to use the same container pointing to the right, let me move this under. And let's add the padding, I'm going to change this to REM, I've switched over to ram for all of my paddings. And that is because it is better for accessibility. I got more videos on that coming out, especially about how REM and pixel and where to use them and how they really make a difference. I got something planned for that. So you don't make sure to subscribe so you get notified that good YouTube stuff. All right, I'm going to change this to 1.5 and same thing here 1.5. All right. Now for the background, I do want to make that transparent background. So I am going to, I got a background color right here that I'm going to use for this design, but I'm going to take this all the way down to transparency. Now let's add in our elements, I'm going to add in an image, you could use the image or logo widget, totally your choice. I'm going to move this to full. And that is because I have an SVG so it doesn't matter because it is only four kb, which is micro sized. Okay. And then let's change the size on this. I do use pixels for my width for a small image like this. And I'm going to change this to 140 pixels. Next up, I'm going to add the WordPress menu widget. That's this one right here. This is a great widget, especially for SEO, but we got to set it up because out the box, you see a setup where this is a older widget by Elementor that really hasn't gone through changes. So we got to do a few things. First off, remove this pointer, take that off right there. So we don't get that weird hover pointer. We don't need that. Next up, we need to change our breakpoints. If you are going to change it, I'm going to leave it on tablet mode. But I'm going to switch this to full width. We're going to come back to all this when we do our mobile menu, let's set it up for desktop burst. Let's go over here to style. And we need to remove this default padding because by default when we do have the padding here, let me let me open this all the way up. This is a reason why I would never use this horizontal padding. When you use it, we're getting this padding on the sides right here on the right and left. So it'll never be flushed with the content and it's always going to be often even though this looks like just a little bit right here, it still breaks the design and this was this is what makes it not so clean. This should not be used. So take this all the way down to zero. Same thing with the vertical padding, we don't need this top and bottom padding. It is not needed right here. We're going to control all this with our flex. This is what we need to use the space between. This is the right way to style this up. So let's go ahead and open it up. You could use pixel, you could use RAM. I am using RAM for this. Let me change this to I'm going to change it to force kind of big but I'll leave it there. Alright, now let's go ahead and style this up. I already have a text for this. And let me add my color. I feel this is a little bit too big right here and might get bogged down when it comes to mobile. So I'm going to change this to a smaller button size. Okay, we'll use that and test it out. That's what I had here. And I am going to reduce the size of this. Let me change it to 2.5. Okay, do you know what? I'm just going to put it at a three. And since I have no dropdowns, I'm just going to leave the dropdown menu as it is. If you are going to build a dropdown, then you're going to want to go through this and style it up. Now, if you are going to style the dropdown, you would want to adjust your horizontal and vertical padding and make sure that it looks fine. This is okay for horizontal and vertical padding. But for the main menu, it is not okay. Don't use this for the main menu because you see right here it is flushed with the pink box. That's what we want. We want our content flush with this pink box. Now we got the spacing on the bottom and that is only because it is adjusting to the height of our image. So we got to fix our contents in the middle of our container. Go to your outer container. This is where we go back to our flex controls and we adjusted here. Now first we align it to the center. And now you can see that pink box is wrapping perfectly around our menu. Let's go back to the container. And from here, we are going to set this at a space between. It's going to push the content all the way over to the right. And that is it for the desktop menu. Now to make it mobile, let's go over here to our responsive mode. And I'm going to set this up in tablet portrait. And then we can see it right here. Let's go to content. This is the reason why we put full width. If you don't put full width, you get this. So you have to have it at full width. And then over here, you got the option to set up your own icons. I'll let you do that. I'm just going to use the default elements or icons right here. But we still got to change something. So let's go ahead and change the drop down the drop down here. And we need to change the distance because you can see by default, it is really close to it's really close to the logo right here. It is on top of our menu bar. So we got to move it down. And you can see the little space right here. So I like to keep it flush. Let's take it down a couple more pixels. So right about here, 28 pixels seems like a really good sweet spot. Now let's fix our horizontal and vertical padding. In fact, the horizontal looks good. Let's just do the vertical so we get more space right here. All right, I'm going to put it let's put it at 16 pixels. And then I let's set up our typography. I want it to be a bit bigger here because when we do use our phones, things tend to be smaller on the phones. So set it up here after you've set it up, test it out on your phone and actually see how that menu looks like. And then let's style up our toggle. We're going to change the color to white. And we don't need a background. I'm going to leave it alone. I don't really see a need for that. And we can make it a little bit bigger. I'm going to change this to 24. And now we got our mobile menu, we could take it to mobile size and our menu is completed. And now the next steps that we would do is just making this transparent header, which is going back over here to advance, you could either use a negative margin method, or you go here to position absolute, change your Z index to 100. And then go to your offset right here and remove this zero. Because you see when you do have the zero, we got that top bar going on top is starting to overlay. So just remove that. And there you go. They're going to be flush right on top of each other, update it, and we got a menu created in just a few minutes. And that is it for this video. What's your favorite method for creating your transparent headers? Drop it inside the comments. And if you got another method, let us know. Tell us how you do it inside of the comments. Well, that's it. Wait, I almost forgot. Can't forget that good YouTube stuff. You know what is up. Like and subscribe. It does help to support this channel. And it is greatly, appreciated. All right, I'll see you inside the next one. Thank you.