How to add a transparent header?

You can create a transparent header that will be placed on top of the content (ex. hero image). It can help you blend a header part with your content which is a popular design pattern to be used on the homepage.

To create a transparent header, you will need to follow these steps:

  1. Create a new header in Header Editor;
  2. Add a row element;
  3. Select row Design Options and set a background color to none;Row background color control in Visual Composer
  4. Save your header;
  5. Open the page where you want to add the header;
  6. In on-page settings, select the layout with header and choose your header from the drop-down;

At that point, you have your header added and you can start creating the content of your page. As you can see, the header is located above the content – it is time to place it right on top of the content:

  1. Open Design Options of the first row in your page layout;
  2. Set row margin-top value to negative (ex. -120);Row Design Options with negative margin
  3. Add an extra class name to the row;
  4. Add custom CSS to the page to control z-index (required to display header on top of the content).
.transparent-header{
Z-index: -1;
} 

Transparent header for WordPress with Visual Composer