How to change Prestige theme header color on scroll?

Store Design
1

My header is transparent when at the top of the landing page, which I like, but then it turns white (I use sticky header) when the user scrolls down. I want it to turn black instead of white. I copied and pasted some code from a different thread into the bottom of the theme.scss.liquid file but that cause the header to be a solid black when user is at top of landing page, and then when they scroll down it turns white.

Anyone know the code I can paste in to achieve this?

2

Hey @Derelicte

I read your description. Can you please provide your webshop URL?

I will check and provide you solution here.

Thanks!

3
4

Hey @Derelicte

Please try this CSS class.

Please add following code in your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
.Header {background: #000; box-shadow: none;}
.Header .Heading, .Header .Link--secondary, .Header .Link--primary:hover {color: #fff;}
.DropdownMenu{background: #000;}
}

Hope this works for you.

Thanks!

5

Hi thank you I will try that out soon and see if it works and let you know!

1 Like
6

HI @Derelicte

Please try CSS and if any problem let me know.

Thanks!

7

So it works as expected for desktop, but there is no change and my header is still white on mobile. Looks like it also caused my “Search” and “Cart” icons to disappear and now the words are written out but I wanted them to stay as icons

8

Hello, @Derelicte

Please try this CSS for mobile.

Please add following code in your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
.Header__Icon .Icon--nav {color: #fff;}
.Header {background: #000;}
}

Hope this works for you.

Thanks!

9

that definitely helped make my mobile header be black but for both desktop and mobile my search and cart icons are black. My mobile header also has a white separation border at the bottom I would prefer to not be there. My desktop version doesn’t have that white separation border at the bottom of the header. Also, is there a way to add 5-10% transparency to the black header?

Thanks for your help so far!

10

Here is an example that shows the type of transparency blur effect.

header.jpg
header.jpg1125Ă—633 58.3 KB

11

Okay, I realize I’ll probably just have to post a job for the transparent affect.

But the code I Was given earlier for mobile does work however it made my mobile header have a white outline whereas my desktop version doesn’t. Is there a way I can remove the white border on mobile?

12

I am trying to keep the sticky header transparent on prestige theme. Anyone know how?