Brooklyn - Sticky header issues

[augds]

Hi everyone,

I implemented a sticky header in my brooklyn theme by adding the code below, but i'm running into two problems.

1. The hamburger menu does not appear to change color as the rest of the header items does when turning to the sticky version.

2. I want it to show the regular version of my logo when header is sticky and transparent version when header is not sticky.

URL: augds.myshopify.com

CSS: 

/* Sticky header */
#shopify-section-header {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
}

#PageContainer {
  padding-top: 80px;
}

@media screen and ($max: $small) {
  #PageContainer {
    padding-top: 120px;
  }
}

.template-index #PageContainer {
  padding-top: 0px;
}

.fixed-header .site-header {
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg}};
}

.template-index .fixed-header .site-header {
  -webkit-animation: fadein 0.5s;
 /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s;
 /* Firefox < 16 */
  -ms-animation: fadein 0.5s;
 /* Internet Explorer */
  -o-animation: fadein 0.5s;
 /* Opera < 12.1 */
  animation: fadein 0.5s;
}

.fixed-header .site-nav__link, .site-nav__link--burger, .fixed-header .site-header__logo a {
  color: {{settings.color_headings}} !important;
}

JS:

/* Sticky header */
$( document ).ready(function() {
$(window).scroll(function(){
    if ($(window).scrollTop() >= 50) {
        $('.header-wrapper').addClass('fixed-header');
    }
    else {
        $('.header-wrapper').removeClass('fixed-header');
    }
});
});

Could anyone offer some help? Thanks!

[KetanKumar]

Hello, @augds 

Thanks, post

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.header-wrapper.header-wrapper--transparent .burger-icon {background: #000 !important;}

[augds]

Hi @KetanKumar !

Thanks for the help, but that makes the header icon black everywhere. I still want it to be white when header is not sticky on the home page. 

Eventually I would want it to work like here: https://www.dropbottle.com/

Any idea?

[KetanKumar · Accepted solution]

@augds 

Thanks for update

please add this code

.fixed-header .burger-icon {
    background: #000 !important;
}

[augds]

Thank you that worked!

[KetanKumar]

@augds 

Thanks for update and support.

[lenael118]

Hi, I have the exact same issue where the transparent logo won't change to my main logo when I use a sticky header. I used the same code however, it is still not working? Is there some update with the theme or something that is causing that? Thanks

(Transparent logo)

(Still the same transparent logo with sticky header even the menu changed color)

my theme.css

#shopify-section-header {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
}

#PageContainer {
  padding-top: 80px;
}

@media screen and ($max: $small) {
  #PageContainer {
    padding-top: 120px;
  }
}

.template-index #PageContainer {
  padding-top: 0px;
}

.fixed-header .site-header {
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg}};
}

.template-index .fixed-header .site-header {
  -webkit-animation: fadein 0.5s;
 /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s;
 /* Firefox < 16 */
  -ms-animation: fadein 0.5s;
 /* Internet Explorer */
  -o-animation: fadein 0.5s;
 /* Opera < 12.1 */
  animation: fadein 0.5s;
}

.fixed-header .site-nav__link, .site-nav__link--burger, .fixed-header .site-header__logo a {
  color: {{settings.color_headings}} !important;
}

.header-wrapper.header-wrapper--transparent .burger-icon {background: #000 !important;}

.fixed-header .burger-icon {
    background: #000 !important;
}

my theme.js

$( document ).ready(function() {
$(window).scroll(function(){
    if ($(window).scrollTop() >= 50) {
        $('.header-wrapper').addClass('fixed-header');
    }
    else {
        $('.header-wrapper').removeClass('fixed-header');
    }
});
});

[KetanKumar]

@lenael118 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[lenael118]

Hi, thanks for your reply. I sent you a private message as my site is not currently using the theme I'm editing.

[KetanKumar]

@lenael118 

Thanks i will check personal message and let you know