Transparent Header

It is now easier than ever to create transparent headers, using the 'Overlap first row on this page' feature in the Header Design options. This feature is commonly used to make dramatic hero images where header text appears on top of the hero image instead of in a traditional header with a solid color background. 

When enabled, the header will overlap the first row on the current page, meaning that the first row will now tuck behind the header. If the header is made transparent, the image in the first row will show behind your header nav, logo, etc. This feature is customizable for each page of your site.

How to use this feature:

  • Open the Header Design Editor

  • Enable Overlap first row

  • You will now see the row below shift upward.
  • If you wish to use a transparent header, set the header color to transparent.

    Tips

  • Transparent headers are generally most effective when an image is used in the row below as a hero image.
  • This setting will only affect the current page you have enabled it on, to enable the overlapping header option for other pages you will need to repeat this process on each individual page.
  • Check to make sure that your logo, button, navigation text, and any other header item is easy to read. Use contrasting colors to help. If necessary, you can use a color for your header set to partial transparency.
  • You may need to adjust the padding of the row below the header to maintain proper sizing once you’ve overlapped it with the header. Use the Row Spacing settings to do this.