I recently added some simple code to make my websites Header transparent so the Header is showing over the the homepage banner. Like, the homepage banner covers the entire screen.
But now, the header is sticky and the shopify settings dropdown tab “Sticky Header” - “None” is not working.
The problem is my header is now always sticky and I would like it to be normal (not sticky) so when you scroll up or down the header is removed. IE, the header only shows when you are at the top of the webpage.
Hey! Let’s get your header to unstick.
Do you mind sharing the code you added to the theme or your store URL.
There might be something blocking the theme’s default behavior.
I deleted that code and it is not sticky, success. but now my header is not transparent like I want.
How can I make my header transparent so the homepage banner shows the entire screen including the header. IE the header links and logo are displayed over top of the banner.
Here is the answer to my own question for future readers with the same problem. Note, if this doesn’t work for you, you might have already added code somewhere else that interferes with this code. In my case, I have not added any code to my store yet and this code works perfect in Dawn Theme (10.0 version).
This code makes the header transparent for Dawn theme AND continues to let you use the “Sticky Header” drop down setting in the “Header” settings. IE, you can add this code for the transparent header AND also set/use the Sticky Header setting to “None, On Scroll Up, Always or Always - Reduce Logo Size” and they both work together.
In my specific case, I wanted the Header to be transparent and I wanted the Sticky Header to be OFF, so I added this code and set the Sticky Header Setting to “None”.
Boom.
God Speed.
The Placement for Transparent Header Code -
Add to Theme.Liquid, before “” (which was 2 lines before the very bottom for me).
