Sticky Header Overlapping Top of Page - Debut Theme

Solved
AG0103
Excursionist
23 0 13

I have added a sticky header to my site but it is now overlapping the top of all of my pages. I searched through a few threads but none of the answers helped me. Can someone provide me with the code and the position to fix this?

URL: www.sweeterthansugarcosmetics.com 

PW: sugar

dmwwebartisan
Shopify Partner
7477 1776 2380

@AG0103 

Please add the following code at the bottom of your assets/theme.css file.

#PageContainer {
    padding-top: 176px !important;
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
AG0103
Excursionist
23 0 13

Screen Shot 2021-03-30 at 11.04.53 PM.pngThank you, it worked for the desktop version but on mobile, it creates a huge space at the top on each page.

dmwwebartisan
Shopify Partner
7477 1776 2380

This is an accepted solution.

@AG0103 

Please remove the old code and add this new code.

@media only screen and (min-width: 750px) {
#PageContainer { padding-top: 176px !important; }
}

@media only screen and (max-width: 749px) {
#PageContainer { padding-top: 86px !important; }
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
AG0103
Excursionist
23 0 13

Thank you so much! That worked perfectly.

switcheries
Excursionist
21 0 5

Hi, I'm having the same issues and I can't fix it with the code given. I'm using Debut theme with CSS. It's fine on the homepage, but there's still huge gap on the collection page both on mobile and desktop. 

website: www.switcheries.com

Thank you for your help!

0 Likes
dmwwebartisan
Shopify Partner
7477 1776 2380

@switcheries 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px) {
 .main-content { padding-top: 20px !important;}
}

@media only screen and (min-width: 750px) {
 .main-content { padding-top: 20px !important;}
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
nixon777
New Member
1 0 0

Used the last code and it´s still overlaping a little bit on the homepage in mobile

0 Likes
Vanessa140
New Member
1 0 0

I think I am having the same issue, but I cant find Padding-top in my ccs code.

0 Likes