sticky header - brooklyn theme

[jtan]

hi i added a sticky header to my theme which works great most of the time however when on a product page with more then 1 picture the product details scrolls into the header. 

seems to only happen when there is more then 1 picture

site: https://thetinycrate.myshopify.com/

password: Jesstan21

[KetanKumar · Accepted solution]

@jtan 

Welcome to the Shopify community!

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

#shopify-section-header {
z-index: 9999;
}

[jtan · Accepted solution]

can't thank you enough Ketan. 

You are a life saver

[BrPlLo]

Hi @jtan ,

Could you please share the code that you used to create a sticky header for the brooklyn theme. I tried multiple options from the web, nothing seems to work for me.

Thank you!

[jtan]

}#SearchDrawer {
z-index:1001;
}

#shopify-section-header {
position: fixed;
z-index:1000;
left:0;
right:0;
-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 }};
}

#PageContainer {
padding-top: 80px;
}

[BrPlLo]

Thank you @jtan  :)

---

[ThreeCrazy]

@jtanCan you tell me where to copy these codes separately?

[jtan]

paste everything in theme.scss

[ThreeCrazy]

I did what you said, but the layout of the entire website changed

[jtan]

theme.scss is were i put the code. 

i'm not a coder so i can't really help much more