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

Hi Rabbie and Alice,

My guess would be that the code that is being used is coming from Option II of the guide, and not Option I. The code in Option II will only work correctly if the announcement bar is enabled.

If the announcement bar is not enabled, then it might create the behaviour that you are seeing. Could you please make sure that you are definitely using the CSS and Javascript from Option I of the guide, and not Option II?

Please keep in mind that this tutorial is strictly for the Debut theme and will not work for any other themes.

Let us know!

Sean

1 Like