Transparent header
Header
Last updated
Header
Last updated
Make the header background transparent to display the full height of featured media sections. You can enable the transparent header on the home page and other selected pages.
If the sticky header option is enabled, the header will transition to the default colors and logo when the page is scrolled down.
The transparent header requires a full-width section at the top of the page. Supported sections include:
Important
Set Section width to Full width and Top padding to 0px. Click the section and scroll to the bottom the find the settings.
Click the Header section and scroll down the the Transparent header settings. Check the Enable on home page checkbox to turn on the transparent header.
To enable the transparent header on other pages, enter the template names separated by commas in the Enable on additional templates field.
Enter the full template name with the template type and name, with a period in between (ex. page.about).
The following are default templates in Eclipse:
You may want to use a different colored logo if the section image is darker or lighter than the default header color. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos.
Your alternate logo image must have the same width and height as the default logo
If the sticky header option is enabled, the header will change to the default logo and colors when the page is scrolled.
Click Header section to find settings
| Setting | Description |
|---|---|
Logo image | Upload a PNG image to display as your store logo when the header is transparent. |
Text | If no logo is uploaded, change the text color of the store title. |
