Brooklyn theme: change transparent logo color once scrolling down

[adthai]

Hi, as you can see, my logo looks perfectly fine on my slideshow. However, when I scroll down, the 2nd picture occurs. I have implemented a code that allows a sticky header. Is there any way to make the logo change to black once I scroll past the slideshow? My url is https://a-lineage-story.myshopify.com/. The password is 'beckew'

2nd photo (no logo seen cause it is white on a white background)

[dmwwebartisan · Accepted solution]

@adthai 

add following css class 

.template-collection .header-sticky a {
    color: #000!important;
}

[dmwwebartisan]

@adthai 

you have added any css class in your css file ?

[adthai]

yes,

this is what i used to make a sticky header

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.main-content { 
  padding-top: 260px; 
}

/*Bof padding non index pages*/
body:not(.template-index) .main-content {
    padding-top: 520px;/*this is based on 260px above but that seems huge!*/
}
/*Eof padding non index pages*/

.shopify-payment-button {
  z-index: 0; 
}

[dmwwebartisan]

@adthai 

ok no problem add following css class 

 Please add the following code at the bottom of your assets/theme.scss.liquid file.

.header-sticky.header-wrapper {
    background-color: #000 !important;
}

.header-sticky a {
    color: #fff!important;
}

[adthai]

hi, that works well, but when I go into my collections and scroll down, the white text turns invisible.

[dmwwebartisan]

@adthai 

Please share screenshot what do you want.

Thanks!

[adthai]

This is before I scroll down.

This is after I scroll down.

[dmwwebartisan · Accepted solution]

@adthai 

add following css class 

.template-collection .header-sticky a {
    color: #000!important;
}

[adthai]

thank you so much!

[dmwwebartisan]

@adthai 

add following css class  for product and cart page 

.template-cart .header-sticky a {
    color: #000!important;
}

.template-product .header-sticky a {
    color: #000!important;
}

.template-page .header-sticky a {
    color: #000!important;
}

[adthai]

I also noticed that on my F.A.Q. page and terms of service, the same issue happens where the navigation menu disappears because it is white on white.

[dmwwebartisan · Accepted solution]

@adthai 

Please add following css class

.template-cart .header-sticky a {
    color: #000!important;
}

.template-product .header-sticky a {
    color: #000!important;
}

.template-page .header-sticky a {
    color: #000!important;
}

.template- .header-sticky a {
    color: #000!important;
}

[adthai]

The burger icon on my collections page on mobile also turns white when I scroll down the page on mobile. Is there any way to fix this? Sorry for all the issues, I appreciate all your help.

[dmwwebartisan]

@adthai 

add following css  for mobile burger icon

.template-index .header-sticky .burger-icon {
    background-color: #fff !important;
}

[adthai]

Nevermind, fixed it. Sorry about all of those issues! Thank you and have a good night

[adthai]

is it possible to make this sticky header on the pages black and the font white?