@jessisaun Same theme and issues for me. Did you discover a solution?
A sticky navigation menu is fairly basic for websites, I’m surprised Shopify does not offer a built-in option.
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