Sticky header covering content in debut theme

Store Design
1

I have the sticky header on my site however, its almost not a header but a banner and when I scroll it covers the content at the top. website: https://konceptwatches.com

2

Hi @Kinfolk ,

You are so funny. Any way. Here’s the code you can paste at the theme.css under the Asset folder.

First code, is to remove the margin that is one of the reason your header is so tall. Next code is to minimize the size of the logo. The last code is lowering down the page content so it is not covered by the header.

#shopify-section-header > div:nth-child(3) > header > div > div.grid__item.medium-up--one-quarter.logo-align--left > h1 {
margin: 0 !important;
}

#shopify-section-header > div:nth-child(3) > header > div > div.grid__item.medium-up--one-quarter.logo-align--left > h1 > a > img {
max-width: 150px !important;
}

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

thank you. lol I read over your reply, thank you for your help. I will try out your response. I think I have a bigger problem. I have uninstalled and installed plenty of apps trying to find the right one. I think I have a bunch of useless code which is slowing down my site as well. thanks again

1 Like
4

hey thanks it seemed to work out great but it was just for the homepage. the other pages still seem to be covered a bit. am I able to change it for all the pages.

5

Hi @Kinfolk ,

It seems like the #PageContainer was not pass in. Try this instead. Add this to the code. You can delete the #PageContainer {

padding-top: 150px !important;

}

.page-container {
padding-top: 150px !important;
}