Brooklyn - Sticky header issues

Solved
augds
Explorer
98 0 23

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
Shopify Partner
14204 1654 5114

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
augds
Explorer
98 0 23

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?

0 Likes
KetanKumar
Shopify Partner
14204 1654 5114

This is an accepted solution.

@augds 

Thanks for update

please add this code

.fixed-header .burger-icon {
    background: #000 !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
augds
Explorer
98 0 23

Thank you that worked!

KetanKumar
Shopify Partner
14204 1654 5114

@augds 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
lenael118
New Member
2 0 1

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

Screen Shot 2021-02-05 at 12.20.39 am.jpg

(Transparent logo)

Screen Shot 2021-02-05 at 12.20.46 am.jpg

(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
Shopify Partner
14204 1654 5114

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
lenael118
New Member
2 0 1

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

0 Likes
KetanKumar
Shopify Partner
14204 1654 5114

@lenael118 

Thanks i will check personal message and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes