I’m using the horizon theme, and I want my collection cards to show through the header. I have transparent header selected for my collection page, but that doesn’t seem to be doing anything. This lookbook page is a new template i made under the collections section. I want this page to be able to have a transparent header and also use an inverse color scheme, so you can still see the menu and the icons over the images.
Topic summary
A user wants collection cards to display beneath a transparent header in the Horizon theme, but enabling the transparent header setting isn’t working on their custom collection template.
The Issue:
- Transparent header feature is enabled but not functioning
- Goal is to achieve transparency with an inverse color scheme for visibility of menu and icons over images
Solution Provided:
- Horizon’s transparent header only works by default on templates with the hero section, excluding custom collection templates
- Fix requires:
- Adding the
transparent-headerclass to the<header>tag in the custom template - Setting section background
z-indexlower than the header’sz-index - Switching header text and icons to “inverse” mode in the theme editor
- Adding the
The discussion appears resolved with a technical workaround for implementing the transparent header on custom templates.
In Horizon, the transparent header only works for the templates that come with the hero section (by default), this does not include custom collection templates. You can fix this by adding the transparent-header class to the <header> tag in your custom template and making sure your section background has a z-index lower than the z-index of the header . Also, make the text in your header and icons “inverse” in the theme editor.