It is now easier than ever to create transparent headers, using the Overlap first row feature. This option can be found in your Header Design options. When enabled, the header will overlap the first row, 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.
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.
- Transparent headers are generally most effective when an image is used in the row below as a hero image.
- 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.