Solved

Brooklyn theme: change transparent logo color once scrolling down

adthai
Pathfinder
98 0 32

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)
dmwwebartisan
Shopify Partner
12292 2548 3698

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12292 2548 3698

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 15 (15)

dmwwebartisan
Shopify Partner
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

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
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

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

dmwwebartisan
Shopify Partner
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

This is before I scroll down.

adthai_0-1634542997258.png

This is after I scroll down.

adthai_1-1634543010966.png

 

 

dmwwebartisan
Shopify Partner
12292 2548 3698

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

thank you so much!

dmwwebartisan
Shopify Partner
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

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
Shopify Partner
12292 2548 3698

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

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
Shopify Partner
12292 2548 3698

@adthai 

add following css  for mobile burger icon

.template-index .header-sticky .burger-icon {
    background-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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

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

adthai
Pathfinder
98 0 32

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

adthai_0-1634543399737.png