Dawn Theme 15.4.0 – Header icons and logo shaking when scrolling (Sticky Header)

Shopify Discussion
1

Hi everyone,

I’m using the Dawn theme version 15.4.0, and I’m experiencing an issue with my header icons and logo shaking/jittering when scrolling.

Details:

Theme: Dawn 15.4.0
Header type: Sticky header enabled
Issue: When I scroll up or down the page, the logo and header icons briefly shake or jump, instead of staying smooth and stable.
This happens consistently while scrolling, not just on page load.

I haven’t added any custom JavaScript to the header, and the issue seems related to the sticky header behavior itself.

Has anyone else experienced this with Dawn 15.4.0?
Is this a known bug, CSS issue (e.g. transforms, height changes), or something that can be fixed with a small adjustment?

Website: crepscity.com

Any help or guidance would be greatly appreciated. Thanks!

2

Have you tested it by reverting to the original header search icon configuration?

Also, your site seems to take a looong time to load, and things are displaying at different times. The header, the announcement bar, and the winter sale banner, all seem to load out of sync, and it’s causing them to jolt when something is displayed.

3

I’d agree, your store looks slower and heavier then it was before.

Have you tried other browsers to confirm the shake?
Sometimes it may happen because of the browser settings (say, zoom).

Also – go to, say https://theme-trade-demo.myshopify.com/collections/all and check whether you see the same behaviour when scrolling (ignore the fact that logo becomes smaller).

4

hey @crepscity ,

I hope you’re doing well!

Running a few quick tests, your store is severely slow (currently at 13s load time - as reference, having anything above 3 seconds is already a red flag)

image
image1213×576 126 KB

What is slowing your website down the most is the video you have with the ‘sale’, in the very beginning. I highly recommend removing it. Very rarely you will want to prioritize design over performance.

In regards to the buggy sticky header, are you experiencing it in any specific pages or across the entire theme?

5

Hi,

Hope this will help

  • Lock the header height

Dawn dynamically adjusts spacing which can cause the jump. You can stabilize it by forcing a consistent height.

CSS example

.header-wrapper {
  will-change: transform;
}

.shopify-section-header-sticky {
  transform: translateZ(0);
}
  • Disable logo resizing in sticky mode
  • Check padding differences
  • Reduce scroll “snap” behavior,if enabled
6

Hey @crepscity!

Thanks for posting your Query to Shopify Community. Upon checking I notice that, there is no issue regarding the shaking effect.

Can you help with sharing the following details.

  • On which device you currently checking this effect. Sometime the issue happens on the specific devices.
  • Can you share a Screen recording with us, so that we can take a look what’s the issue is existing with shaking effect.

Upon the above information, we can provide you the relevant information and solution.

Cheers :slight_smile:

7

Hi, thanks for checking this out.

I’ve removed the video at the top of the homepage as suggested.

Regarding the header, I currently have it set to appear on scroll, but when scrolling back up, the header still slightly shakes/jitters. This issue occurs across all page, not just specific ones.

I’m also reaching out to both my menu app and the Beae homepage editor that created the custom sections, to see if any of their scripts or settings are contributing to the behavior.

Please let me know if there’s anything else you recommend checking on your end.

8

Hi, this code really didn’t do anything?

9

Any solution to this?