Sticky header not working on Dawn Theme

Store Design
,

Topic summary

A Dawn 13.0.1 theme user encountered an issue where the sticky header wouldn’t function despite being set to “always fixed” in settings. The problem persisted even after disabling third-party apps and attempting various CSS and JavaScript fixes.

Root Cause Identified:
Custom CSS code using overflow-x: hidden !important on html/body elements was overriding the header’s position: sticky attribute.

Solution:
Changing the CSS from overflow-x: hidden !important to overflow-x: clip resolved the issue while maintaining the intended overflow behavior.

Key Details:

  • Issue appeared inconsistently across different page types (worked on collection pages but not homepage/product pages)
  • Browser caching initially created confusion about whether the problem was resolved
  • Another user reported the same issue and confirmed the overflow-x: clip fix worked for them as well
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

The sticky header bar is not working on my Dawn 13.0.1 Theme despite it being set to “always fixed” in the visual editor. I already tried several possible solutions from this forum and other websites, incorporating CSS Coding and even modifications to the javascript of the header.liquid file, but nothing worked.

My Store link is https://liftandtravel.at

I am using the “Essential Announcement Bar” app for the announcement bar, but even with this app embed disabled the fixed header bar does not work. I would like to make the announcement bar disappear when scrolling down but not the header bar.

Best regards, Michael

Any help would be very much appreciated.

I would like to avoid updating my theme altogether, if possible, because there is a lot of custom coding going on in the current version of the shop.

2

I don’t know how, I don’t know why, but now it suddenly works, without changing anything in the last few hours… Maybe this was just some weird error, and it took some time to properly update or something was cashed in my browsers (i tried multiple ones for testing), hard to say, but this issue is therefore closed.

3

I revert, this seems to have just been coincidence, on the collection page it works: https://liftandtravel.at/collections/all-products

But on the homepage and product pages it somehow doesnt… https://liftandtravel.at/ and for example https://liftandtravel.at/products/prime-2-0

4

Okay, I finally solved it. I had some custom CSS in my section-main-product.css, which hid the overflow for many things, because I had issues with weird scrollable areas, which shouldn’t be scrollable, and destroyed the website flow, but this has also overwritten the position: sticky attributes of the header and some other things…
html, body, product-modal, product-modal div{
overflow-x: hidden !important;
}

I changed this to overflow-x: clip; and now it works fine.

1 Like
5

I could use some help with this as well. I am using Dawn - with Shopify announcement - Sticky header not working any longer… just stopped, not sure what caused it. Any help would be greatly appreciated.

6

html, body{

overflow-x: clip !important;

}

It’s working for me