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

Change the number 80 to 107. The number 107 made it stop doing what you described in my situation. Maybe try playing around with that number until it stops

This is the line of code you need to edit as you can see instead of 80px i changed it to 107px

#PageContainer {
padding-top: 107px;
}

View my reply above for further clarification

2 Likes
42

Unfortunately it didnā€™t work out, but thanks anyway!

1 Like
43

Hi there, I followed all the instructions in your post, but just got a white space between the header and the slideshow (first thing under the header). The header/announcement does not follow me when I scroll down either.

My website is www.immigenshop.com

Thanks!

Edit: Solved!

44

Hi Sean,

Excellent work, thank you!

So I was stoked using option 1 that it worked on both desktop and mobile.

BUT but on mobile, the scroll-down menu that resides in the header does not function as desired: after scrolling down the site, sticky header all perfectly in place, I clicked the menuā€¦ but the menu list does not appearā€¦ so I thought maybe the menu got ā€œleft behindā€ at the top. So I tested by scrolling back to the top and click Menu button, the menu then worked perfectly just like before I implemented the codeā€¦ So, is there more code I have to look at to add for my case?

By the way, I am using a premium theme, not the debut theme

Thanks once again for the excellent code snippets!

45

By the way, I am using a premium theme, not the debut etc

Thanks

46

Thanks for this amazing and helpful tutorial about Fixing header and Navigation for Debut Theme. I also face that problem but due to your tutorial, i solve that problem and my store is running properly. Again Thanks.

47

And for the all code works only on mobile? I have a debut theme.

48

Hi SeanP this is really helpful. However, I am wondering if it is possible to fix the nav bar except for checkout. I find it inconvenient to see the nav bar while making payment

49

Hello!!!

Thatā€™s really nice. I have a little issue with it. My breadcrumbs are not appearing after the implementation of the code. Hereā€™s how I have them coded:

code1.png
code1.png893Ɨ798 56.3 KB

Do you know what can I do to fix it?

50

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

I have the fixed menu change color when i scroll down, but I donā€™t know how to also change the text and icons, they stay white and canā€™t bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

Also, the menu is too low and covers part of all other pages. How can I fix that? I already modified the padding on the code for the menu, but that doesnā€™t help.

Screenshot: https://imgur.com/ufkG8no

These are my codes:

I have this at the end of theme.scss.liquid:

/* CHANGE HEADER TO STICKY */

#SearchDrawer {
z-index:1001;

}

.site-header {
position: fixed;
z-index:1000;
background-color: #F7F1EB;
left:0;
right:0;

}

.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}

#PageContainer {
padding-top: 100px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;

}
}

And this at the end of theme.js.liquid:

// Header

function headerSize() {
var $headerHeight = $(ā€˜div#shopify-section-headerā€™).outerHeight();
$(ā€˜#PageContainerā€™).css(ā€˜padding-topā€™, $headerHeight);
}

$(window).on(ā€œloadā€, headerSize);
$(window).on(ā€œresizeā€, $.debounce(500, headerSize));

$(window).scroll(function() {
scroll = $(window).scrollTop();
if (scroll >= 1) {
$(ā€˜.site-headerā€™).css(ā€˜topā€™, ā€˜0ā€™);
} else {
$(ā€˜.site-headerā€™).css(ā€˜topā€™, ā€˜initialā€™);
}
});

1 Like
51

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

1 Like
52

option 1 - step 5:

filename should be renamed from ā€œtheme.jsā€ to ā€œtheme.js.liquidā€ !!!

sticky header works perfect

53

Can anyone help me to make my main navigation header sticky in brooklyn theme

Thanks alot

header sticky in theme brookyln but I can`t,can anyone help me?

54

Hey Sean,

Iā€™m trying to impliment your code into my website - option 2. Its moving the logo up and down, however the navigation menu is remaining at the top. What Iā€™m seeking is to keep the announce bar and logo at the top, but I would love to have the Navigation menu (which has home, shop, collabs, stories, contact us) to stick to the top as the user scrolls up and down. Iā€™m not a super experienced coder, so Iā€™m hoping youā€™ll able to assist me with this!
Any help from you or others - again would be greatly appreciated!

55

Hey @Haylalayla

I have a working solution to the sticky header in brooklyn theme.

Here is my short guide with simple, easy to follow instructions: https://community.shopify.com/c/Technical-Q-A/Sticky-header-transparent-on-home-page-white-background-with/m-p/726119/highlight/true#M23682

56

Thank you Sean OPtion 1 work a treat for me.

57

If a menu with sub menu is longer than a phone screen you cannot see all the menu. Is there a bit of code that I can use to turn off Sticky/Fixed Header when viewed on phones. Thanks in advanced.

58

does anyone else get an issue with their cart when the header is sticky.

When i open the side cart the frozen header cuts off the top of the cart.

Anyone find a work around

Untitled.png
Untitled.png1592Ɨ984 144 KB

59

Hello jtan,

Please share your site url.

So that i can check and let you know the exact solution here.

1 Like
60

Very nice post! I am currently using the ā€œsimpleā€ theme, is this working also on this theme? thank you very much