sticky header - brooklyn theme

Solved
Highlighted
Explorer
150 4 20

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

 

Untitled.png

1 Like
Highlighted
Shopify Partner
5046 746 1645

This is an 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;
}
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
1 Like
Highlighted
Explorer
150 4 20

This is an accepted solution.

can't thank you enough Ketan. 

You are a life saver

0 Likes
Highlighted
Tourist
8 0 0

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!

 

0 Likes
Highlighted
Explorer
150 4 20

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

0 Likes
Highlighted
Tourist
8 0 0

Thank you @jtan  :)


0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
Explorer
150 4 20

paste everything in theme.scss

0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
Explorer
150 4 20

theme.scss is were i put the code. 

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

0 Likes