BROOKLYN THEME: STICKY HEADER BLOCKING TOP OF IMAGES

[bwalk112]

I have coded a sticky header into my shop. The only problem is that the header now blocks the top of all of the pages it is on. I have attached the code I used. I have also attached an example of it cutting of/ blocking the top of a page. Any help would be much appreciated. Thanks.

SHOP URL: Shopathena.co

//sticky header
.header-wrapper {
position: fixed;
z-index: 1;
background-color: #000({{ settings.color_body_bg }}, 0.0);
width: 100%;
}
.header-sticky .header-wrapper {
background-color: black({{ 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 {
}

[bdowling]

Hi, you can try inserting an empty div directly above the image and assign it the exact same height as the header (keeping in mind mobile and desktop).

I hope this helps.

[bwalk112]

I'm not very coding savvy so I don't really know what any of that means.. haha 

[Kinjaldavra · Accepted solution]

hello @bwalk112 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
body:not(.template-index) .main-content {
    padding-top: 172px !important ;
}
}

[bwalk112]

Works beautifully, Thank You

[bwalk112]

Wondering if you could help with one more similar issue -- The sticky header blocks half of the product title on desktop view (pictured below); any way to fix this?

[Kinjaldavra]

hello @bwalk112 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

body:not(.template-index) .main-content {
    padding-top: 175px !important ;
}