Brooklyn: sticky header: Homepage transparent header to scroll to normal page header

[voky]

Hi there,

I am using the Brooklyn theme and have already gotten the codes to make my header sticky from here which is great. The only issue I have is that the home page sticky header when I scroll uses the transparent header logo (white). My background is a light color and this causes the logo to ‘disappear’.

Is there any way to change the logo to be the usual logo image (color) on a normal page header so that there is uniform page header throughout (aside from the homepage transparent header)?

CSS code:

.header-wrapper, .header-container {
  position: fixed;
  z-index: 10;
  background-color: rgba($colorBody, 0.0);
  width: 100%;
}

.header-sticky.header-wrapper {

  background-color: rgba($colorBody, 1);
  border-bottom: 1px solid rgba($colorTextBody, 0.0);
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  
  .site-nav {
    transition: all 0.3s ease-in-out, height .8s ease;
    -webkit-transition: all 0.3s ease-in-out, height .8s ease;
    -o-transition: all 0.3s ease-in-out, height .8s ease;

    margin-top:0 !important;
  }
}

.header-sticky a {
  color: $colorTextBody !important;
}

.header-sticky .burger-icon {
  background-color: $colorTextBody !important;
}

body:not(.template-index) .main-content {
	padding-top: 130px; /*or another number as necessary*/
}

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

JS:

$(window).scroll(function(){
    if ($(this).scrollTop() > 80) {
       $('.header-wrapper').addClass('header-sticky');
    } else {
       $('.header-wrapper').removeClass('header-sticky');
    }
});

Thanks!

[KetanKumar]

@voky

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

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

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

[voky]

Thank you @KetanKumar for replying!

The URL: https://2jiefcscxdhc5elz-58719862959.shopifypreview.com - does this work?

[KetanKumar]

@voky

thanks for for it

i have check this issue but i can see its work perfect

[voky]

@KetanKumar

The scroll and sticky works great. The only issue I have is with the logo. On the transparent home page header, my logo is white but my background is light hence the logo disappears when I scroll down.

I would like for the logo to change to the regular page logo (color) when I scroll down if that is possible.

Thanks!

[Zworthkey]

Hii @voky
Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->assets/timber.scss.css

.header-wrapper--transparent .site-header__logo-image--transparent {
    display: none;
}

paste this code
Thank you.

[voky]

Hello @Zworthkey

Thank you so much for your reply!

I realized I only have the code file assets/timber.scss.liquid instead of timber.scss.css. I pasted the code you provided under timber.scss.liquid and it makes the logo disappear totally both in home page and when scrolling.

I would like to have the white logo on transparent header and then it switch to the regular logo (colour) when I scroll down.

Thanks!

[KetanKumar]

@voky

sorry for that issue can you please try this code

.header-sticky a {
    color: #fff !important;
}
.header-sticky header.site-header {
    background: #86776e;
}

[voky]

Hello @KetanKumar

Thank you for your reply!

This changes the color of my header instead.

[voky]

Hello @KetanKumar

I have tried looking for a solution for a while but unable to find one. Wondering if you might be able to help with this? On the transparent home page header, my logo is white but my background is light hence the logo disappears when I scroll down.

I would like for the logo to change to the regular page logo (color) when I scroll down if that is possible.

Thanks!