Brooklyn theme: change transparent logo color once scrolling down

Store Design
1

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’

adthai_0-1634540314997.png
adthai_0-1634540314997.png1912×234 308 KB

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

adthai_1-1634540323220.png
adthai_1-1634540323220.png1897×248 86.6 KB

1 Like
2

@adthai

you have added any css class in your css file ?

3

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; 
}
4

@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;
}
5

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

6

@adthai

Please share screenshot what do you want.

Thanks!

7

This is before I scroll down.

adthai_0-1634542997258.png
adthai_0-1634542997258.png1912×308 18 KB

This is after I scroll down.

adthai_1-1634543010966.png
adthai_1-1634543010966.png1900×359 103 KB

8

@adthai

add following css class

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

thank you so much!

10

@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;
}
11

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

adthai_0-1634543399737.png
adthai_0-1634543399737.png1904×273 12.4 KB

12

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.

13

@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;
}
1 Like
14

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.

15

@adthai

add following css for mobile burger icon

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

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