Fixed header bar with brooklyn theme

Em___Ahr
New Member
16 0 0

Hi anybody know how i am able to have a fixed header bar when scrolling down with the brooklyn theme? Please help.

here are examples,

https://www.nuuvem.com/

https://kutoa.com/

Art of an acquired taste.
0 Likes
ZenQ
Tourist
3 0 1

Hi!Add this code to the bottom of your theme.scc.liquid

 

.header-wrapper {
  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 {
}

JustPea
Excursionist
15 0 6

Hey Guys!

We recently implemented a sticky nav bar on the Debut theme that will auto-hide on scroll down and re-appear on scroll up. It's really simple, and we hope it will be helpful to some of you!

Instructions here.

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
Pinkybreak
Tourist
3 0 1

Hey, i added the Code for the header bar. 

Can anybody tell me how i can make this bar black? Like in the Venture Theme..?

 

I would like to have the bar over the slideshow in black.

 

Thanks!

0 Likes
bdd
Shopify Partner
6 0 3

Hi, you just add this code below to theme.js.liquid

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
       $('#headerna').addClass('header-sticky');
    } else {
       $('#headerna').removeClass('header-sticky');
    }
});
0 Likes
insomniadubai
New Member
1 0 0

This worked for me! Thanks

0 Likes
Carla_CH
New Member
1 0 0

Hi All!

I'm also looking to fix the header to the top of the page when scrolling and make it black. I did the following based on this conversation. The header stuck when scrolling but did not become black:

 

Step 1:

 

Add this code to the bottom of your theme.scc.liquid:

 

.header-wrapper {
  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 {
}

 

Step 2:

 

add this code below to theme.js.liquid

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

 

Please let me know if I'm missing a step.

 

Thanks! 

0 Likes