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.

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:

Open Design Options of the first row in your page layout;

Set row margin-top value to negative (ex. -120);

Add an extra class name to the row;

Add custom CSS to the page to control z-index (required to display header on top of the content).

We use cookies to provide a personalised experience for our users. By continuing to browse this site, you give consent for cookies to be used. For more details, please read our Privacy Policy and GDPR section.