 Oh, Yota, why did you move? It was perfect. What's up everyone? I'm Jeffrey from Lightbox. Here's Yota from Lightbox. He's actually the CEO. And in this video, you know what? This video we're just gonna make super fast and easy. It's gonna be building a transparent menu or header. And in other words, that is a menu that goes on top of the banner that has a clear see-through background. And one of the reasons why you might want to add this to your website is because it does give a bit more of a premium feel. All right, so let's go ahead and just go right into it. So when you start off, make sure you have two tabs open. We wanna have the tab open with your banner right here. And as you can see, mine already starts off. I have the logo, the menu right here. It doesn't look good at all. We'll make that look a lot better coming up. But by default, the menu goes on top of the banner like this. So let's go ahead and create our own menu and header and elementer. Go back to your dashboard. From here, navigate over to templates and then to theme builder. Select on that, then go to add new. From here, go down to header and we're gonna start a new header. We're gonna call this one transparent header or transparent menu. That'll work. All right, select on create template. Now you got all of these pre-built menus here. We're not gonna use any of these. We're gonna build a real simple one ourselves. We're just gonna put just like over here except we'll make it look better but we'll have a logo and our menu. Now it's really important before you do this that you've already built your menu inside your WordPress dashboard. So over here, go on select a new row. We'll choose the two columns right here. And we got two spaces. One for our logo, one for our menu. For the logo, I like to use the image widget. I don't really like using the site logo. I prefer image because I feel I have more flexibility with it. Drag that over there. And let's go ahead and select my logo. I'm gonna choose the light logo since it's gonna go on top of a dark background. And let me style this up real quick. I'll make this just 120 pixels. And I'm gonna put this over to the left. This is really important as well. Right here on the edit column, make sure on both of your columns that you align these in the middle. So right here underneath vertical line, select on middle. And do the same over here. Make sure it's edit column, vertical align middle. What this will do is this will make sure that the logo and your menu and whatever you have in your columns are aligned in the middle. That one isn't gonna be on top or is it gonna be off center? All right, so let's go ahead and add our menu right here. We're just gonna use a simple nav menu by Elementor. Let's go ahead and align this to the left. And well, it's dark and we need to make this white. So let's change the text color to white. Now let's go ahead and select on publish. From here, select add on condition. For this tutorial, we're just gonna add it to the entire site, hit save and close. And let's go to take a look at how it looks here, refresh it. Now we have our menu here, but we gotta get rid of this white space over here. So what we're gonna do is we're actually not going to get rid of the space. We're going to move this banner here up. So we want this to go up underneath the menu. Go back to your header right here, select on edit section. Make sure you're on edit section right here. From here, go over to your advance and we're going to work with the margins. Unlink them. This link makes them both even. We only want to use a margin for the bottom and we're gonna use a negative margin. What negative margins do is they pull elements in. So by doing a bottom negative margin, we're pulling in the bottom elements. And when you do this on the header, it's going to work on every single page. I think about a minus 80 should work. You'll have to play around with this number. This number will be however many pixels is the width of your header. This is around 80 right here. So let's go ahead and select on 80. The next thing we wanna do is your Z index. This is very important. We wanna give this one, let's give it a high Z index number. We'll start this one at a thousand. And what Z index does is, Z index is how we layer elements. So let's say we have one element here, one element here. One is on top of the other. The one with the higher Z index number is gonna go on top. So if you want this number to be on top, the way you would make this go on top is, you would give this number down here a higher number than this. And when you do that, then this one will move on top. And this works with several different elements. It's whichever one has the higher number is how it goes, it goes on top. And that's the hierarchy. All right, so now we got a thousand Z index right here. Normally they start off at about one by default. Let's go ahead and select on update. Go over here, refresh. And that's it. We now have a transparent menu on top of our banner. And it gives it a nice feel right here. Now real quick, I also wanna show how to make this more mobile friendly because I don't want anyone out there getting lost with just having a desktop version and the mobile looks bad because if we minimize this, you'll see it starts to act funny right there. So you'll see that we got this space. So here's how we solve this right here. Go back over to your transparent menu. Let's go down here to the responsive mode, select on mobile, and you can see this column right here stacks on top of this one. So our menu goes underneath the logo. And the reason why this happens is when this goes into mobile, your columns become 100% taking up 100% of the width. To go ahead and change this, select on your column and we'll give it a custom width of 50%. So this one takes 50, we'll get this one 50%. Now let's go ahead and style this nav menu up real quick. We'll do this really fast, we'll make it center and we'll turn on full width. And let's go ahead and update that, refresh. And now we're good to go with the mobile menu. I'll leave the styling up of colors up to you. I think you got that part right there. Well, I hope this video helps. Actually, I got quite a few videos I put out recently on different effects and different kind of headers that we can make, a lot of sticky headers, a lot of headers that change, all kinds of stuff. So if you want to get creative and you want to try new things for your website, check those out and make sure to subscribe to the channel, hit the like button. You know all that good YouTube stuff. It really does help, I appreciate it. Thank you for watching and I'll be back soon with more web design related content and Elementor tips, tricks and hacks. All right, thank you, bye.