Fixed header hides product images/text in Brooklyn Theme

Solved
Highlighted
Tourist
4 0 0

Hi!

I have tried to search for this information all around the forum but hav'nt found anything that helps me out. I'm using the Brooklyn theme where I have made a fixed header. 

But the fixed header hides a part of my product images and text. How can I solve this?

Here is an example of what I mean at my page: https://www.erlaofsweden.se/collections/jackor-rockar/products/midjejacka-i-marint-navy

And it looks even worse on a mobile device. 

 

This is the code i used in the bottom of the theme.scss.liquid file:

 

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

 

 

0 Likes
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@Groszman 

 

Go to your theme.js file and add following code the end of file:

$(document).ready(function(){
$("main.main-content").css("padding-top", $(".header-wrapper").height());
});

Thank you,

Tejas

 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Tourist
4 0 0
Thanks! That fixed it on my laptop, but it still looks quite the same on a mobile, see how the header cuts the top of the jacket?
Are there any different code for mobile devices or should I just stick with it they way it looks?
[cid:EC9D8E1C-53A6-4793-8468-925CF2BC64CD-L0-001]
0 Likes
Highlighted
Shopify Partner
1023 214 463

@Groszman 

 

Add following code at the end of your timber.scss.liquid file:

@media screen and (max-width: 590px){
.product-single__media-group-wrapper {
     margin-top: 0px; 
}
}

Thank you,

Tejas

 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
2 Likes
Highlighted
Tourist
4 0 0
That did it! Thanks a lot!
0 Likes
Highlighted
Tourist
27 0 1

Hi,

I have the same issue with my minimal theme.  I have fixed the menu when you scroll but it has cut off the top of my banner.

 

Any help would be appreciated.

 

Thanks,

 

Jenny

0 Likes