Transparent header to white background when scrolling

Store Design
1

Hello! I have the debut theme and I have a sticky header. I want the header to be transparent but when you scroll down on the page I want the header to be white with black text. I can not find code for this that works for the debut theme!

2 Likes
2

@mgilkey

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thank you!

www.greydendiapers.com

1 Like
4 
#shopify-section-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    padding-top: 0;
    background-color: white !important;

}

@mgilkey
Add this code in the bottom of the theme.css

thank you.

5

Please add below css in bottom of assets/theme.css file

.site-nav–centered {
padding-bottom: 0;

}

.site-nav {
padding: 25px 0 46px 0 !important;
margin: 0;
background: #fff;

}
Thank you.

6

@mgilkey

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-section-header {background: #ffffff;}
7

Hello! I have tried this and it did not seem to work. Nothing changed

1 Like
8

@mgilkey

sorry bt your missing css element this } before code please check