Awesome tutorial!
I do have a little problem though… after I scroll down the page and then back to the top, the top bar covers the content underneath it.
if that makes sense…
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.
1 Like