Transparent header
Blend the main header and navigation with your hero or slideshow section
Activating the transparent header is Story is one from the Header section setting:
Enable in the Header settings
Use the Alternate logo option to provide an image that works best with your transparent header.
Choose which type of pages to display the transparent header. Most stores will display on the home page. You have to ability to also display on collection pages and blog post pages (article pages).
When using the sticky header feature, your customers will always have access to the header area while scrolling down the page. When you combine the transparent header feature with a sticky header, you can use two different logo images. The alternate logo image is used in the transparent header and the main primary logo image is used in the sticky header while your customer is scrolling:
Darker logo appears when scrolling down the page
In the above example, the main logo is dark and appears in the sticky header:
Primary logo - Used while scrolling down
The alternate logo which is white, appears in the transparent header:
Alternate logo - Used in the transparent header
Additional tips when using a dark background as the header color:
Video: Dark headers with light hero images
Last modified 11mo ago