Sticky header in Debut theme was overlapping page and plugin elements due to using a fixed-position header (.site-header {position: fixed}) and padding-top on #PageContainer. Position: fixed keeps the header detached from normal flow, leading to content being covered; z-index controls stacking order.
Fix applied: Replace the header CSS with #shopify-section-header {position: sticky; top: 0; z-index: 1001; box-shadow…}. Position: sticky keeps the header in flow and pinned at the top on scroll, reducing overlap issues.
New issue: A white space appeared below the header (screenshot attached), likely caused by JavaScript adding padding to the container.
Resolution: Override the container padding with .page-container {padding-top: 0 !important;}. This removed the gap.
Outcome: Sticky header works without overlapping content or extra spacing. No further changes requested; the thread is resolved.
@Roombles I guess some JS code is adding the space through padding. The quick fix is just to override that padding through CSS.
Just put the below code at the end of your css file and this should do the trick.
.page-container {
padding-top: 0 !important;
}