BROOKLYN THEME: STICKY HEADER BLOCKING TOP OF IMAGES

Solved
bwalk112
Excursionist
18 0 4

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

bwalk112_0-1623964714922.png

bwalk112_1-1623964923963.png

 

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

 

0 Likes
bdowling
Pathfinder
80 13 41

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
Excursionist
18 0 4

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

Natztech
Shopify Partner
1891 492 1172

This is an 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 ;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
bwalk112
Excursionist
18 0 4

Works beautifully, Thank You

0 Likes
bwalk112
Excursionist
18 0 4

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?

 

Screenshot (12).png

0 Likes
Natztech
Shopify Partner
1891 492 1172

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

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly