Blog

How to create a Transparent Header Menu in WordPress with Elementor Pro

https://www.youtube.com/watch?v=Y9vnx6TZp2E&t=32s

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.

Source : Youtube

This Post Has 120 Comments

  1. vreyro linomit 24 Dec 2020 Reply

    What i don’t understood is in fact how you are no longer really a lot more neatly-preferred than you might be right now. You are very intelligent. You understand therefore considerably on the subject of this matter, produced me in my opinion consider it from numerous varied angles. Its like men and women are not fascinated unless it’s something to accomplish with Woman gaga! Your own stuffs excellent. All the time take care of it up!

  2. kolkata call girl 29 Dec 2020 Reply

    Having read this I believed it was very informative. I appreciate
    you spending some time and energy to put this article
    together. I once again find myself personally spending a lot of time both reading and commenting.
    But so what, it was still worth it!

    my web blog … kolkata call girl

  3. kolkata call girls 29 Dec 2020 Reply

    Incredible! This blog looks exactly like my old one!
    It’s on a completely different topic but it has pretty much
    the same layout and design. Wonderful choice of colors!

    Look into my page kolkata call girls

  4. Escorts In kolkata 29 Dec 2020 Reply

    I have read so many content about the blogger lovers but
    this piece of writing is actually a nice paragraph, keep it up.

  5. best Cars in Kolkata 29 Dec 2020 Reply

    Howdy! This is my first visit to your blog! We are a group
    of volunteers and starting a new project in a community in the same niche.
    Your blog provided us useful information to work on. You have done a wonderful job!

  9. Casey Jepsen 10 Jan 2021 Reply

    How can I make a personalized banner for a blogspot blog?

  10. discuss 10 Jan 2021 Reply

    Wonderful beat ! I wish to apprentice at the same
    time as you amend your site, how could i subscribe for a blog site?
    The account helped me a appropriate deal. I had been tiny bit familiar of this your broadcast offered brilliant transparent idea.

  11. kolkata escorts 14 Jan 2021 Reply

    This is a topic that is close to my heart…
    Many thanks! Where are your contact details though?

  12. vreyrolinomit 16 Jan 2021 Reply

    I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an nervousness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside case you shield this hike.

  13. call girls in kolkata 19 Jan 2021 Reply

    Howdy! Do you know if they make any plugins to
    help with Search Engine Optimization? I’m trying to get
    my blog to rank for some targeted keywords but I’m not seeing very good success.

    If you know of any please share. Many thanks!

  14. kolkata escorts 20 Jan 2021 Reply

    Hi there! This is kind of off topic but I need some advice from an established blog.

    Is it tough to set up your own blog? I’m not very techincal
    but I can figure things out pretty fast. I’m thinking
    about making my own but I’m not sure where to start.
    Do you have any ideas or suggestions? Many thanks

  15. call girls in kolkata 21 Jan 2021 Reply

    Remarkable issues here. I’m very glad to peer your post.

    Thank you a lot and I am having a look forward to contact you.

    Will you please drop me a e-mail?

  16. Relogio Digital De parede a pilha 21 Jan 2021 Reply

    O Relógio para Madeira Bobo Bird Light emitting diode é um
    produto personal, desenvolvido para os indivíduos que valorizam acessórios distintos
    e únicos.

  17. GeeHii Brain Pills 22 Jan 2021 Reply

    I have to show my appreciation to the writer for rescuing me from such a crisis.
    As a result of scouting through the internet and finding ways that were not pleasant,
    I believed my life was gone. Existing without the presence of answers to the problems you have sorted out as
    a result of your entire site is a critical
    case, as well as ones that could have in a negative way
    affected my entire career if I hadn’t come across the blog.

    The understanding and kindness in handling all the details was vital.
    I don’t know what I would’ve done if I had not come
    upon such a stuff like this. I can also at this point
    look forward to my future. Thank you very much for your high quality and effective help.
    I won’t hesitate to refer the sites to anyone who ought to have direction on this situation.

    Here is my homepage … GeeHii Brain Pills

  18. Gee Hii Brain Pills 23 Jan 2021 Reply

    We’re a group of volunteers and starting a new scheme in our community.
    Your web site offered us with valuable information to work on. You’ve done a formidable job
    and our whole community will be thankful to you.

    My web-site … Gee Hii Brain Pills

  19. vreyrolinomit 23 Jan 2021 Reply

    I like this web site very much, Its a really nice office to read and get information.

  20. Gee Hii Brain Pill 24 Jan 2021 Reply

    I have read a few good stuff here. Certainly worth bookmarking for revisiting.

    I surprise how so much effort you place to create any such magnificent informative website.

    Also visit my web site Gee Hii Brain Pill

  29. vreyrolinomit 8 Feb 2021 Reply

    Thanks for sharing superb informations. Your web site is so cool. I am impressed by the details that you have on this site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles. You, my friend, ROCK! I found simply the information I already searched all over the place and simply could not come across. What an ideal website.

  46. 엠카지노 4 Mar 2021 Reply

    What i don’t realize is actually how you’re now not actually a lot more smartly-appreciated
    than you may be now. You are so intelligent. You understand therefore considerably on the subject of this
    topic, made me for my part imagine it from a lot of numerous angles.
    Its like men and women aren’t involved until it’s something to do with Girl gaga!
    Your own stuffs outstanding. At all times maintain it
    up!

  49. Michaelgic 8 Mar 2021 Reply

    meds online without doctor prescription: https://genericwdp.com/ generic drugs without doctor’s prescription

  60. Jeffreyrig 12 Mar 2021 Reply

    buy generic 100mg viagra online 100mg viagra
    generic viagra walmart

  63. Jeffreyrig 13 Mar 2021 Reply

    viagra without a doctor prescription viagra cost per pill
    best place to buy generic viagra online

  65. Jeffreyrig 14 Mar 2021 Reply

    viagra from canada 100mg viagra
    online doctor prescription for viagra

  67. freeholmes.com 14 Mar 2021 Reply

    I would like to use the chance of saying thanks to you for your professional instruction I have continually
    enjoyed viewing your site. I’m looking forward to the actual commencement of my school research and the general groundwork would never have been complete without visiting your blog.
    If I could be of any assistance to others, I will be pleased to help by way of what I have discovered from here.

    Feel free to surf to my blog – EreXegen Male Enhancement (freeholmes.com)

  74. Ricardooptig 17 Mar 2021 Reply

    paxil online buy paxil
    natural help for ed

  94. MarvinFup 28 Mar 2021 Reply

    zithromax 500mg over the counter: zithromax 500 mg – can you buy zithromax over the counter in canada

  100. Brfgdexy 31 Mar 2021 Reply

    [url=https://ljcialishe.com/]lowest price cialis[/url] [url=https://cialisvja.com/]cialis dosing[/url] [url=https://viagraonlinejc.com/]viagra price comparison[/url] [url=https://viagratx.com/]how much viagra to take[/url] [url=https://buycialisxz.com/]cialis 20mg[/url]

  101. Abgctiest 31 Mar 2021 Reply

    [url=https://thesiswritingtob.com/]help me write a thesis[/url] thesis help free thesis guidelines research methodology thesis

  102. GrvBrora 1 Apr 2021 Reply

    [url=https://kloviagrli.com/]how to get viagra without a doctor[/url] [url=https://vigedon.com/]how effective is viagra[/url] [url=https://llecialisjaw.com/]does cialis raise blood pressure[/url] [url=https://jwcialislrt.com/]cialis doses[/url] [url=https://jecialisbn.com/]where to get cialis[/url]

  103. Scottreema 1 Apr 2021 Reply

    erythromycin capsules: zyvox price
    buy fucidin online

  113. BillyWhiny 8 Apr 2021 Reply

    erectile dysfunction pills: ed pills male erectile pills

  115. AlfredFeemi 8 Apr 2021 Reply

    levitra pills: viagra pills order erectile dysfunction pills

  116. BillyWhiny 9 Apr 2021 Reply

    cialis pills online: viagra pills best erectile dysfunction pills

Leave a Reply