Palo Alto - Applying sticky header for all pages

Highlighted
Shopify Partner
406 56 91
.site-header {
height: auto !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Shopify Partner
406 56 91
.site-nav__link {
color: #000000 !important;
}
.site-header {
    background-color: #ffffff !important;
}
.supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--search g, .supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--user g {
fill: #000000 !important;
}
.supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--cart path {
fill: #000000 !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
29 0 4

@paramSoft 

Thanks! These works!

How about the filter tags? I think the filter tags locks into a fixed position when you scroll down.

Is it possible for them to stop scrolling just below the logo?

Thank you!

0 Likes
Highlighted
Shopify Partner
406 56 91
.collection__filters {
top: 64px !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
29 0 4

Thanks @paramSoft the filter position works well now.

Apologies but I must have seen it wrongly.

For the sticky header, can it be on a transparent background before scrolling? And the white bar only appears when you scroll?

 

Thanks for all the help @paramSoft 

0 Likes
Highlighted
Shopify Partner
406 56 91

Remove this css

.site-nav__link {
color: #000000 !important;
}
.site-header {
    background-color: #ffffff !important;
}
.supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--search g, .supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--user g {
fill: #000000 !important;
}
.supports-js .has-transparent-header .site-header:not(.has-scrolled) .site-nav__item .icon--cart path {
fill: #000000 !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Excursionist
29 0 4

@paramSoft 

The bar's gone now but I still want the white bar to appear & the text to turn to black when you scroll down (like my homepage, which is the default for the theme I'm using)

Is this possible? Thanks.

 

0 Likes