BROOKLYN THEME: STICKY HEADER BLOCKING TOP OF IMAGES

Solved
bwalk112
Tourist
18 0 3

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
Explorer
66 13 34

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.

0 Likes
bwalk112
Tourist
18 0 3

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

0 Likes
Natztech
Shopify Partner
1355 380 918

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
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
bwalk112
Tourist
18 0 3

Works beautifully, Thank You

0 Likes
bwalk112
Tourist
18 0 3

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
1355 380 918

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
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store