Sticky/Fixed Header and Navigation for Debut Theme

Store Design

Topic summary

Implementation of Sticky Header for Debut Theme

This thread provides a tutorial for adding a sticky/fixed header to Shopify’s Debut theme, with two options:

  • Option 1: Makes the entire header (including announcement bar) sticky
  • Option 2: Makes only the navigation sticky, allowing the announcement bar to scroll away

Both require adding CSS code to theme.scss.liquid and JavaScript to theme.js.

Common Issues Reported:

  • Content hidden behind header: The header covers page content instead of pushing it down. Users resolve this by adjusting padding values (typically changing from 80px to higher values like 107px, 130px, or 200px depending on header height)
  • Page jumping/loading glitch: Content briefly appears behind the header on page load before repositioning correctly
  • Mobile menu malfunction: After scrolling, dropdown menus don’t display properly
  • Search/cart overlay problems: Search drawer and cart don’t appear correctly when header is sticky
  • Gap above sticky header: Empty space appears between top of viewport and header when scrolling

Alternative Solutions:

Several users offer modified code snippets and workarounds. One contributor promotes a free professional solution via external link.

Status: The discussion remains ongoing with unresolved issues for many users, particularly around the content overlap and page-load animation problems. The tutorial is unsupported by Shopify and specific to unmodified Debut theme.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
87

I want to make the header menu of my website stick to the top of the page when scrolling past it, but NOT the announcement bar above it. So that when you scroll, it first scrolls down normally until the announcement bar is not visible anymore, and then the header sticks to the top of page after scroll.

I am using the Debut theme.

I have read this thread: https://community.shopify.com/topic/518018, applied both versions and they work. However in Version 2, instead of behaving like I described above, the announcement bar scrolls and the header is sticky, but not to the top of the viewport. It just stays sticky where it is on first load, hence after scrolling there is space above it in which you can also see the website scrolling underneath.

I have applied the code from Option 2 above in theme.css.liquid and in theme.js, and then started playing around with it to get that offset effect, using this tutorial: http://jsfiddle.net/gxRC9/502/

The fiddle example above is EXACTLY what I am trying to achieve: scroll until header reaches top of page, then fix it to make it sticky. (with everything above it on initial load scrolling away outside of viewport)

Now I have this code in theme.css.liquid:

/*Sticky header*/
#SearchDrawer {
  z-index:1001;
}

.site-header {
  -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);
  background-color: {{ settings.color_body_bg }};
}

.fixed {
  position: fixed;
  z-index:1000;
  left:0;
  top:0;
}

#PageContainer {
  padding-top: 80px;
}

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

(i know i dont need the page container stuff right now, most importantly I separated the .site-header css edit (for a nice dropshadow) from the .fixed class, which is what I want to only appear after the offset scroll as described in JS below)

and this code in theme.js

var stickyOffset = $('.site-header').offset().top;

$(window).scroll(function(){
  var header = $('.site-header'),
      scroll = $(window).scrollTop();
    
  if (scroll >= stickyOffset) header.addClass('fixed');
  else sticky.removeClass('fixed');
});

Where its setting a variable for the offset distance of siteheader from the top and then telling it to apply my .fixed class from above CSS once the scroll point went past that level.

But, its not working… :face_with_tongue:

I am guessing its either something to do with measuring/setting the offset distance or with Jquery in the theme.

(FYI: what I dont want to do is work with fixed “px” values in the offset. I want to keep it dynamic. FYI #2: I want this to happen on both desktop & mobile).

Would love if somebody could help me find my thinking error !! Thanks guys

1 Like