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.
30

Hi Sean,

I’ve done your option 1 for sticky header in Debut theme with announcement bar enabled. It seems to be the only thing on here that works.

My issue is this though: When the page is loading (when you first get to the page), it’s almost like the whole page if shifted up under the header a tiny bit, and then once the page officially is loaded, it pops back down to how It should be. There’s some sort of lag/glitch.

Has anyone experienced this? It just looks bad for a customer visits the site. I would really prefer to have the sticky header/announcement bar, but I hate the way this is happening. I can’t find anything to fix it.

Thanks!

1 Like