Sticky header blocking content on Debut Theme and creating a gap.

New Member
2 0 1

Hi all,

Hoping someone can help me. I tried to add a sticky header to my Shopify site and I've had some problems.

The header is now sticky, but it blocks the content on the top of all the pages it's on. The other issue is the header doesn't actually sit all the way at the top of the page now, there appears to be a small gap between the very top of the page and where the header starts.

The code I pasted into theme.scss.liquid is:

.site-header {
position: fixed;
-webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);

#PageContainer {
padding-top: 80px;

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;

I also pasted this into theme.js:

function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));


The website is

Any help would be massively appreciated!

Shopify Partner
18750 1970 6940


sorry, for this issue if possible to share the image further issues?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing