How to make the transparent sticky header into solid when scrolling?

Store Design
1

I want to make my sticky header into a normal, solid one when scrolling in the craft theme.

This is the code I used to make it transparent:

.header-wrapper{
background: transparent !important;
position: absolute;
width: 100%;
}

Website: healandgrow.net

Password: meinaw

2

Hi @someeeeeean !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation

Please paste this code at the bottom of base.css under assets in theme code files

@media screen and (min-width: 990px){
.site-header-transparent:not(.header–middle-left) .header__inline-menu {
margin-top: 1.05rem;
}

.header:not(.header–middle-left) .header__inline-menu {
margin-top: -3.95rem;
}

.header.header–top-center .header__heading, .header.header–top-center .header__heading-link {
justify-self: center;
text-align: center;
display: none;
}

.site-header-transparent.header–top-center .header__heading, .site-header-transparent.header–top-center .header__heading-link {
justify-self: center;
text-align: center;
display: block;
}

}

Best Regards;

PageFly

3

Hello, than you for your help. However, the code did not work.

4

Hello @PageFly-Victor , I tried your code but it did not work. Is there any other way to solve the issue?

5

Hi @someeeeeean

You can try this code bro

.shopify-section-header-sticky sticky-header.header-wrapper.color-background-1.gradient {

background: #fff !important;

}

Best Regards;

PageFly

6

@PageFly-Victor Thank you for your help. This one worked.

7

Hi,

Where in the code did you add this?

Thanks!