Blog

Hey, and welcome back to LivingWithPixels. In this video, I’m going to show you how you can create a Transparent Header, which is a huge trend in web design right now inside of your Elementor Pro website.

So, if you already use Elementor Pro or you’re thinking about buying Elementor Pro, then this video might be interesting for you. Before we begin, it’s important to say that there are options to create these kinds of Transparent Headers in some WordPress themes like I’ve showed you in this video, but those theme options are often times very limited.

Because you can’t for example, add things like buttons, social icons or other elements to your menu. And for some reason, this technique is not very well known. There are not a lot of tutorials on YouTube about it even though this effect is so popular.

So, let’s just get started. If you are considering to buy Elementor Pro, then please consider to use my affiliate link that you can find in the description of this video because then I get a small commission and that really helps me make more videos on the YouTube channel.

So, thank you in advance if you choose to use my link. I am here inside of WordPress and I am going to go to my dashboard. And the first thing that we are going to do is we’re going to go to the templates over here and we’re going to click on theme builder because the header is part of the theme builder section.

I’m going to zoom out because my screen is too small, okay. So, I already have the header. So, I’m going to delete that for now because we are going to start off from scratch. So, the first thing that you want to do is click on header and then if you click on create a new header, you can create a new header from here, give it a name.

I’m going to click on create the template. So, we have the column set up over here, I’m going to close the navigator for now. I’m going to click on the plus and we need four columns because we need a part for the logo, for the menu items, for the button, and for the social icons.

So, I’m going to pick this one. So, we will have four columns. Now, we want to give it some height. So, we are going to go to height and then click on minimum height and we are going to make it 90.

And this is an important number because we need to remember this number if we want this header to be on top of our other content. So, remember that number. And now we’re going to go to the color. And we’re going to give it a background color.

We are going to delete this later, but if we are going to work with white text, I cannot see what I’m doing over here because this is a white background. So, first, we need to start with a black background so we can actually see what I’m doing.

But I’m going to give it just 50% opacity for now. So, if we apply it to the home page we can actually see that there’s content beneath it. So, this is just for now and we are going to delete this later.

And now, let’s go to the advanced over here and put the Z index on one. The Z index or Zed index is to make sure that our header is on top of all of our other elements. If you really want to make sure, just put it at 10 because sometimes in your website you have already played with this number.

So, I’m going to put it at 10 so then I’m sure it’s always on top of our page. I’ll just click on update or publish for now, and now you’re going to get this screen and it will ask you where you want the header to appear.

I want it to be on the entire side. So, I’m going to click on save and close. Now, I’m going to go back to my home page and click on refresh to see what happens. And now, as you can see, it is transparent, but it’s still on top of our page because my home page ends here.

So, we need to make sure that my home page is beneath the header. So, how we’re going to achieve that is go back to your header and then play with the bottom margin. So, unlink this value and then put -90 over here as you can see it already here in the preview.

Now, the other content that is beneath this header will move inside of our header. But the whole header is on top with this Z index. So, that makes it transparent. So, if we are going to click on update now, go back to our homepage and click on refresh, you’re going to see that right now it’s on top of our page.

And we can see the video true hour black layer that has a transparency. So, in this way, we have created the Transparent Header. So, now, I’m going to place some elements inside of my header. So, for example, if you pick a logo, make sure it’s a white version logo otherwise, you’re not going to see it of course.

So, I have a white version of my logo over here, I’m going to style that really quick. Now, to put your nav menu in it just drag the nav menu widget of Elementor Pro. As you can see, it doesn’t have the right color.

So, of course, we need to change that to the white color. So, if you are going to click on white, now, this looks a lot better. And now, just make the column a little bit bigger. So, it would just be on one line.

I’m going to align this to the right. Okay, over here I want a button, so, I’m going to drag in the button widget. So, these pages appear over here because I’ve created a menu inside of WordPress.

So, if you click on the menu item, the nav menu widget inside of Elementor Pro and you open the menu screen, you can see that I’ve created a menu inside of the normal WordPress menu creator. And you can create a menu from here and you can just drag in your pages from here.

And I’ve made sure that the contact page is not part of my menu because I want the contact page to be inside of this button. So, that’s why there’s no contact page inside of the menu because I’m going to link this button to the contact page.

And I can just search for the contact page over here and link it like this. Boom! Last thing that I need to do is search for a few social icons. Let’s change the platforms over here and by the way, this is not a tutorial for the basics of Elementor.

So, I’m not going to go into all the details here. What I also want to do is I want the content to be vertically aligned inside of every column. So, what I am going to do is I’m going to go to every column, go to advanced, first of all, delete the padding.

So, it will be just on the left. And then, go to the layout and vertical alignment, put it on middle, so then it will be perfectly aligned to the rest of my website. Now, copy this style and paste that onto the other ones as you can see.

Now, just make sure that you have the right sizes for all of your columns like this. All right, let’s click on update for now and see what I’ve created. Go back to my homepage and click on refresh.

And as you can see, right now, this is almost the menu that I want. And now, we can turn off the black. So, we’re going to go back to the main section over here, go back to the style, to background type, just uncheck this one.

Now, we can’t really see what we’re doing over here, but we’re already done, almost at least. Go back to your home page and then refresh and as you can see, now we have a Transparent Header.

So, I did a few things to make this design look a little bit better. First of all, I added animations to every single item. So what I did is I went to the first column, went to advanced, and I went to motion effects.

Then I used the fade in down, then for the next column, I did the same thing. Motion effects fade in from down. But then, I added a delay of like, 300 milliseconds. So then, this column first animates in then this column animate in.

And then, I’m also going to do that for the last two. So, add a motion effect and put this on 600 and put the last one on 900. And this is a really cool effect because now, it will be like an animation inside of the header.

So, click on update, go back to your homepage, refresh, and look at the animation of the menu. Boom! Boom! Boom! Boom! I mean, that’s pretty cool. I’ve also added a few hover effects. As you can see, there is a underline over here, but there’s nothing happening with the button and the social icons.

So, I’ll just click on the button, I go to style and then, within the hover, you can set up an animation for buttons. I almost always use string because I think that is the slickest of them all, looks pretty nice.

And for the social icons I use grow. So, if you didn’t grow to, I can hover, hover animation and click on grow, the icons will grow. We cannot see it here, but trust me, I’m going to show you.

If you go back to your page, refresh this. You can see this is a nice effect for a button and for the social icons now they start to grow. Okay, so now for the mobile menu because the mobile menu doesn’t look very good right now.

What I’m going to do is I’m going to go back to my style and add the background for now because I want to see what I’m doing. I’m going to put the mode on mobile mode. And this is of course, not what you want for a mobile menu.

So, the first thing that I want to do is add some margin inside of this main section. So, go to advanced, unlink this one add 20 to the right, 20 to the left. And then maybe also, 20 to the top and bottom.

Now, I don’t want the button to be in the mobile menu. So, now just click on the button and we’re going to go to advanced, go to responsive and hide this one on mobile and on tablet mode. Now, go to the first column and give this a width, something like 30.

So, then, if we also give a width to this one, go to layout and maybe give that 50. And then go to the last one and give that a width of 20, then it will appear next to this button. So, now the last thing that we want to do is change the style of our mobile menu.

So, we can change the alignment for example. We don’t have a lot of styles in Elementor Pro for the toggle button, which is something that I don’t really like. I just want to insert a custom icon over here.

But for now we just have the hamburger icon. We can change the style over here. So, if we click on the hamburger icon, you’re going to see that this is how it opens. That’s not really how I want it.

So, what you want to do is go to full width and check that. And now, if you’re going to click on the mobile menu, it starts to open like this. Looks a lot better and the icon automatically changes in an X.

You don’t see that over here, but this is what happens behind this icon. Also, change the vertical distance to something that’s more clickable, also, go to the toggle button itself. I do not want a background color over here.

So, I’m going to change that to 0% opacity. I’m going to make the color of the icon white, that looks a lot better. I’m going to make it a little bit smaller because that looks a little bit nicer.

So, now this is how it looks and in this preview, we can’t see that this column is next to this one. But I’m going to check on my mobile phone if it’s what I want. Okay, so as you can see on my mobile phone, it’s not perfect because we forgot to delete the black background.

And there’s also a margin, a white margin on top of it. So, now, I’m going to go back to my computer, and that’s probably because of this padding that we’ve set in the main section over here.

So, I’m going to delete that for now the bottom and the top. It doesn’t look very nice over here, but that’s maybe because of this column that it doesn’t look nice. So, I’m going to go back to style and now delete the background type, go to update, and then go back to my mobile phone.

All right, let’s refresh the page. And as you can see right now, this looks a lot better. Maybe I need a little bit more margin next to the icon, but this is kind of what I wanted for a Transparent Header on mobile.

Yeah, this looks pretty nice. So, now we’re done, but I forgot one thing. And that is that the contact page is now not accessible on the mobile phone. So, what we need to do is go back to our menu, and we need to create a menu for our mobile, that’s a different menu than for the web.

So, if we go back to the menu screen, which you can find over here. We need to create a custom menu for our mobile phone. So, top main mobile, for example. Create the menu, all of the pages that you want to the menu, and rearrange them.

Save this, go back to your header, refresh it, and now, we need to make sure that we will have a custom menu on mobile. So, I’m going to make a duplicate of this one. I’m going to change this one to the top main mobile.

And I want this one to be visible on mobile and on tablet. So, I’m going to go to advanced, go to responsive, and disable the desktop. And for the first one, I want to disable the other two. So, go to responsive and disable tablet and desktop.

And now if we click on update, we go back to our home page and we refresh this, we’re still going to see the menu on our web. That is how we wanted it. And on my mobile phone, it will show the contact page.

This of course, works the same for on tablet mode, you can create a custom design on tablet mode. But I always use the same design on tablet as I use for mobile. Yeah, most of the times that’s how I do it.

So, the last thing that I want to show you is that you can also make your logo clickable to the homepage. Now, how you do that is pretty simple. You just click on your image, you go to content, you go to link, and you go to custom URL.

And then you just find your homepage over here, you click it, you save it, and now your logo is clickable and will automatically link to the homepage. And there’s one more thing that I want to say and that is that sometimes you will still see a white background over here.

And that is because your theme settings are still probably overriding your Elementor settings. So, if you still see a background over here and you’ve done the exact same thing as me, it’s probably because you have to go into the customizer of your theme settings and change a few things over here, but that depends on your theme.

All right guys, so, if you’re convinced that Elementor Pro is the plugin that you need, then please consider to use my affiliate link. If you want any other videos for LivingWithPixels also let me know down in the comments.

And then I will see you in the next video.