Overview
A transparent header on the website allows one to use a banner image the complete width of the website header. In choosing the banner image, the website editor needs to consider the color of the image and the color of menu items. If the background image is not properly chosen, the color of the image may render the menu navigation links "invisible".
These notes demonstrate how to configure a page (or entire site) to use the transparent header. So that the navigation elements appear on the header background image and not a colored background. Mainly used for the Adventist design.
How to
- Click on the Web module to expand it.
- Expand the website
- Click on Layouts
- Click on the Add Layout button
- In the Layout Manager add the following:
- Name: "Transparent Header"
- Collapse header: set checkmark
- Click Create button
- The screen will refresh, click on the title Transparent Header
- Edit the empty layout:
- Under Layout section, drag and drop block Site Header on the page
- Click on the Site Header block
- Under Styles: Background type = Solid
- Background color: transparent
- Drag and drop Content Placeholder block on the page below Site Header block (no settings needed)
- Save your changes
Appearance (whole website)
- ONLY follow these steps, if you are making transparent header the default for the entire website.
- Click on the Web module to expand it.
- Expand the website.
- Click on Appearance.
- On the design tab, Design section, set the Default layout to the new Layout created.
- click on Update button.
- Using this option, you can skip Page Settings below
Page Settings (individual pages)
- Use this option, if applying the layout to individual pages. (this is the usual case, depends on your design)
- Click on the website name to open the page tree.
- Choose a page that should have a transparent header, and click on the menu icon (3 dots).
- Click on Page Settings.
- Go to the General tab.
- In the layout field, select the Transparent Header layout you just made.
- Click on Update button.
Page Content
- On the page itself, add a Section(under the Properties tab / Advanced / Name enter "Header").
- Inside the Section, drag and drop a Hero block.
- To the Hero block: add an image, Title, Description text, call to action, as needed.
- Note!: Call To Action URL is accessed by the small gear icon. Click on that to adjust the CTA settings.
- Under the Styles tab:
- Aspect ratio may need to be set depending on the image.
- 1:1 for mobile
- 16:9 for laptop
- Set the Height:
- It's a responsive field, as the value typically varies based on the breakpoint.
- Suggested settings:
- Mobile: 25 rem
- Phablet: 30 rem
- Tablet: 34 rem
- Laptop: 38 rem
- Desktop: 55
- These settings may need to be slightly altered depending on your configuration.
- Consider incrementing at 5rem intervals at each breakpoint until largest needed height.
- Aspect ratio may need to be set depending on the image.
- As needed, adjust Text align, position, color, background type, gradient type as the pictures dictate.
- View in frontend to check, adjust if needed.
Additional information
for review: 2026-02-03