How to Work With Header Transparency in Avada Layouts

11/08/2020

When creating Headers with the new Header Builder, in Avada Layouts, one thing that might not appear obvious, is how to make the Header transparent (or semi-transparent).

It’s actually very simple. Let’s look at a couple of scenarios, and how to achieve them.

Fully Transparent Header

  • Step 1. To start, in your Header Layouts Section, set the transparency of the desired Header Container to full transparency, by setting the alpha channel to zero.

  • Step 2. Go to the Extras tab, and turn the Position Absolute option to On, as seen below.

Header Container > Background Transparency
Header Container > Position Absolute

That’s it.

If you then place a background image, or color, in the top Container in the page content, not in Layouts, then this content will slide in under the now transparent header, as seen below.

Header Example > Tranparent 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.

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

Header Container > Gradient Transparency

As a result, 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