Need help making header section sticky ( Brooklyn theme)

Solved
Acash
Explorer
53 0 22
0 Likes
AlexHodzitsky
Shopify Partner
62 15 17

This is an accepted solution.

Hi Acash!

Done - https://prnt.sc/12d0xti. My changes are in the Sticky Header theme.

Alex

I didn't choose the Shopify, the Shopify chose me.
Freddie-Nova
Tourist
12 1 1

Hi @AlexHodzitsky , could you be so kind to share how you did is? I'm very curious..

0 Likes
AlexHodzitsky
Shopify Partner
62 15 17

Hi Freddie-Nova! 

There is no universal way to make sticky header, it all depends on your theme. But often this code is enough:

#shopify-section-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

Try pasting this code in your theme's stylesheet and check if your header will display normally after the changes.

I didn't choose the Shopify, the Shopify chose me.
Freddie-Nova
Tourist
12 1 1

Hi @AlexHodzitsky , may I ask you something. 

I found the complete working code for making the header section sticky for the Brooklyn theme using this code from this post: https://community.shopify.com/c/Shopify-Design/BROOKLYN-THEME-Sticky-header-with-Logo/td-p/449684 

.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: 80px;
}
.shopify-payment-button {
z-index: 0;
}

 

Now my question is the following. This code uses the section: background-color: rgba({{ settings.color_body_bg }}, 0.0) to decide the color. How can I changes these values to change the color of the heading. As I read it, it now automatically picks the color of background-color which I decide. I would like to be able to pick the color on itself seperate from the background color. 


0 Likes
AlexHodzitsky
Shopify Partner
62 15 17

Wrote you in private messages

I didn't choose the Shopify, the Shopify chose me.
0 Likes