How to create a transparent header?

  1. Home
  2. Docs
  3. How to’s
  4. How to create a transparent header?

How to create 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 layout for your transparent header in Theme Builder.
  2. In the header section, create the preferred design of your header.
  3. On the design option, set the background to none.Set background color to none
  4. On the content area row, set row margin-top value to negative (ex. -120).
  5. Give the row an extra class name (ex. transparent-header).
    Add extra class name to have transparent header
  6. Add custom CSS to the page to control z-index (required to display header on top of the content).
.transparent-header{
Z-index: -1;
} 

After doing so, you have a transparent header in a layout. If you want to create a page using that transparent header, make sure to use it on layout setting of the page.

Layout setting on a page

You can also do it with header builder, the steps will mainly be the same. You can refer to this video in creating a transparent header.

 

Was this article helpful to you? No Yes

How can we help?