How to Work With Header Transparency in Avada Layouts
In this video.
We’ll be looking at Avada Transparent Header: how to work with header transparency in another layout.
I’m on the online shooter Prebuilt website here and as you can see it has a transparent header.
In this website, though, the header has been set up through the global options.
For this video, I’m going to replicate this header using of other layers and look at how transparency is achieved using that newer method of header construction.
Make sure you subscribe to our YouTube channel. Keep up with all the latest videos like this one.
And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel.
OK, let’s begin.
For more details on how to build headers in about a layer, please see the link docs and videos. But for this video we just want to focus on the transparency aspect of the header containers.
So, I have recreated this sites header here in about the layouts on my local install and as you can see there are two containers.
One for the top bar with the contact details and social links.
And another container with the logo and the menu.
That’s the one we want to be transparent so that the background image of the pages top container shows behind it.
So, the first thing we need to do is set the container’s background to be transparent.
Like any container, we just need to edit it and head to the background tab and in the colour, section make the container background colour transparent by setting the Alpha channel to 0.
Now it appears this is already transparent, and if we look at the option description, the default is indeed transparent. So, in this case we don’t need to do anything.
It’s the next step, however, that completes the process we now need to head to the Extras tab and set the position absolute option to on. This leads the container. Now it is fixed and enables the transparency.
OK, so let’s save that.
I’m going to look at it on the front end.
I’ve already set this header to be active in another layout, so if I refresh the page we are essentially going from the old header to the GNU.
And it’s very hard to tell because they are identical.
Only now this header is coming from about layouts.
And as you can see, the second container is now fully transparent.
And the background image of the top content container is showing through.
Another option might be to add a gradient with transparency to the container.
The Prebuilt website doesn’t have this, but let’s see how this would be done.
I’ll just head back to the layout section and edit that second container again.
So, this time, instead of setting a background colour, I’ll go to the gradient tab.
Here both gradient colours are also transparent, so I will set the.
Top gradient colour to white.
And then pull down the Alpha slider a bit to introduce some transparency to that white.
I could adjust the start and end positions of the gradient type, but here I’m happy with the default.
And if I just pop into preview, we can see both the gradient and the transparency at play.
OK, if we just head back to the pre-built site, we can see another thing that it has going on is the level of header transparency. When the header is sticky.
Let’s look at how that’s achieved in about alliance.
If we come back to our header layout section and the Extras tab of that second container again.
We can see underneath the position. Absolute option is a position sticky option.
This enables the container to be sticky and just below that option is now a sticky container background colour option.
Where we can now control the colour of the container when it is sticky?
In this case, we don’t want the header completely transparent.
In fact, we only want a little bit of transparency, so I’ll edit the background colour to white.
And then pull the Alpha channel slider down just a bit to about 90%.
So now if I save.
Return to the front end of our local site and refresh.
And then scroll. We can see the container goes sticky and that we can just see through it.
Now, in this case we can also note how it’s just the second container that is sticky.
What if we wanted both containers to be sticky and with some transparency?
Let’s look at that.
I just come back to the layout section again and edit the top container.
And before I make it sticky, I’ll just head to the background tab and copy this orange colour.
We will want this to be the starting point for our sticky container colour.
So now we’ll head to the Extras tab and set position sticky to on.
I’ll paste the orange colour into the sticky container background colour option.
And now I’ll edit that colour and pull the Alpha slider down a bit to introduce some opacity.
OK, that makes this container sticky and also slightly transparent, but what about the other container?
Now they’re both set to sticky, but the bottom container doesn’t know about the top container, and so when the header becomes sticky, the bottom one will not be positioned correctly.
To fix this, we need to let the second container know about the top container.
There are a couple of ways to do this.
Not have the option below the sticky background colour is called sticky container offset as the description says, this controls how far the top of the container is offset from the top of the viewport when sticky.
You can use a unit of measurement, like pixels or a CSS selector.
In this case, we don’t want an offset on this container. We want this one to be at the very top.
And as far as size goes, it’s on order. So, the easiest way to do what we want here is to give it a CSS class and then use that class to set the offset in the other container.
So, at the bottom of the general tab here, I’ll give this a CSS class name, let’s say Sticky top bar.
And now if we edit the second container and go to the extras tab, I’ll enter the class in the sticky container offset field.
In this case, I will use the class selector so it will be dot sticky top bar.
OK, let’s save that.
And come back and look at the final result on the front end. I’ll just refresh the page.
Another header, the top container, is currently opaque and the bottom one is semitransparent with the gradient I added.
And now when I scroll, but both remain sticky with the bottom container offset from the top and both get slight transparency. As we have said in the sticky options.
OK, that’s header transparency, Avada layout.
There are many possibilities here. Make sure to also look at the working with sticky containers though link below which covers some of the other cool options with sticky containers. OK, this concludes our video on how to work with header transparency in of outer layers.
If you have any questions or need assistance, please create a support ticket and our team will gladly assist you.