Brooklyn theme: change transparent logo color once scrolling down

Solved
adthai
Explorer
61 0 24

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

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

adthai_1-1634540323220.png

 

 

Accepted Solutions (2)

Accepted Solutions
dmwwebartisan
Shopify Partner
9824 2236 3073

This is an accepted solution.

@adthai 

add following css class 

.template-collection .header-sticky a {
    color: #000!important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

dmwwebartisan
Shopify Partner
9824 2236 3073

This is an 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;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 15 (15)
dmwwebartisan
Shopify Partner
9824 2236 3073

@adthai 

you have added any css class in your css file ?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
adthai
Explorer
61 0 24

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
Shopify Partner
9824 2236 3073

@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;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
adthai
Explorer
61 0 24

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

dmwwebartisan
Shopify Partner
9824 2236 3073

@adthai 

Please share screenshot what do you want.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
adthai
Explorer
61 0 24

This is before I scroll down.

adthai_0-1634542997258.png

This is after I scroll down.

adthai_1-1634543010966.png

 

 

dmwwebartisan
Shopify Partner
9824 2236 3073

This is an accepted solution.

@adthai 

add following css class 

.template-collection .header-sticky a {
    color: #000!important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

adthai
Explorer
61 0 24
dmwwebartisan
Shopify Partner
9824 2236 3073

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →