Sticky header on scroll up, but with header merged to image banner

Store Design
, ,
1

Hello,

I have successfully merged my faded header with my image banner using the following code.

.header-wrapper { position: absolute; width: 100%; }

However, my header is now glued to the page. I would like it to be sticky on scroll up, and disappear on scroll down.

I’ve already selected this option on the customize page, but the new added code seems to cancels it.

Thank you!

1 Like
2

Hi @vl9

Would you mind to share your store URL? Thanks!

3

Hey turns out I was able to figure it out myself.

Thank you nonetheless!

For those who might encounter the same problem, here’s the code that fixed it.

@media screen and (min-width: 768px) {sticky-header.header-wrapper.color-background-1.gradient {background: transparent !important;}.utility-bar.color-background-2.gradient.utility-bar–bottom-border {background: transparent !important; z-index: 99999 !important; position: fixed !important; width: 100% !important;} main#MainContent {margin-top: -210px;}

This allows you to create a gradient header that fades into your image banner. It will also stick on scroll up if toggle that option.