How to Work With Header Transparency in Avada Layouts

Last Update: March 14, 2024

When creating Headers in Avada Layouts, one thing that might not appear obvious is how to make the Header transparent (or semi-transparent). It’s actually quite simple. Keep reading below to look at a few scenarios using the Online Tutor Prebuilt Website, and how to achieve them, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Fully Transparent Header Container

In this scenario, we’re going to recreate the Header of the Online Tutor Prebuilt Website in Avada Layouts. As you can see below, the site header has two containers; the orange top bar, with contact information and social links, and the second container with the logo and the menu. It is this second container we want to be transparent, so that the background image of the top page content container moves up underneath the header.

Online Tutor > Transparent Header Container

OK, so I’ve started by creating the Header Layout Section. As you can see in the back-end builder view, there are two containers, with two Elements in each.

Online Tutor Header > Wireframe View
  • Step 1. In your Header Layouts Section, set the transparency of the second Header Layout Section Container to full transparency, by setting the alpha channel to zero in the Background > Color > Container Background Color option, as seen below.

Header Container > Background Transparency
  • Step 2. Go to the Extras tab of the second Header Layout Section Container, and turn the Position Absolute option to On, as seen below. That’s it. As the top Container in the page content has a background image, then this content will slide in under the now transparent header.

Header Container > Position Absolute

OK, here’s our site with the new Header Layout Section activated. Identical to the original site.

Online Tutor > Transparent Header Container

Transparent Sticky Header

You can also enable any level of transparency for sticky headers, either independently, or in conjunction with the above initial Header.

  • Step 1. In the Extras tab of the second Header Layout Section Container, set the Position Sticky option to On. Two options under this, you will see the Sticky Container Background Color option. Set this to be transparent (or semi-transparent). In our case we will make it White, at 90% – rgba(255,255,255,0.9). That’s it. Remember to save the Header Layout Section.

Online Tutor > Sticky Header Settings

On the front end, as you scroll, the top bar disappears, but the second header container becomes sticky, and semi-transparent, with the content sliding in behind it as you scroll.

Online Tutor > Sticky Header

Semi Transparent Header With Gradient

You might also want something a bit more complex. You can also apply any level of transparency to your Header Container Background, or as in the example here, set a gradient background with varying levels of opacity.

  • Step 1. To start, set the Header Container Background to Gradient. In the example below, the top gradient has been set to white at 94% opacity, and the bottom gradient has been set to fully transparent, as seen below.

  • Step 2. Again, in the Extras tab, the Position Absolute option has been turned to On.

Header Container > Gradient Transparency

As a result, the second container in the header has an almost solid white at the top of the header, quickly graduating to fully transparent. You can adjust where the opacity starts and ends, and how smoothly it graduates, with the Gradient Start and End Position.

Header Example > Semi-tranparent Header

OK, that’s it. There are many ways you can use transparency in your Header Layouts, but this should give you the tools to achieve pretty much any header effect you are thinking of.