Header Issues

Shopify Discussion

Topic summary

Main issue: Header elements in a Shopify Wonder theme “bounce” on page refresh or when interacting with the header. The store has custom positioning code, and the owner suspects it’s causing the jump.

Proposed tests/fixes:

  • Revert to the original theme to isolate whether custom code is the cause (store owner asked how to do this).
  • Explanation offered: sticky headers use fixed positioning, which removes them from normal layout flow and can make content shift. Suggested fix: add top padding to the main content equal to the header height to reserve space.

Current status: The owner clarifies the jump affects header items, not the header container. Sticky-header padding fixes didn’t help, increasing suspicion that custom JavaScript controlling item placement is causing reflows.

Open questions/needs:

  • How to revert to the original theme or safely disable custom scripts to test.
  • Specific code or techniques to prevent JS-induced layout shifts (e.g., pre-allocating space, avoiding DOM re-injection, deferring animations).

No attachments or code snippets provided. Discussion remains unresolved.

Summarized with AI on December 11. AI used: gpt-5.
1

Hi there!

In my header in my Shopify Store Wonder theme, I see a bounce every time that I refresh my screen or click on anything in my header. I think this is because I have a lot of code to keep my header in place how I want it so I think the items on it bouncing is because of the header trying to lock into place where I put it. How do I get it not to bounce?

Please let me know! :slight_smile:

1 Like
2

An easy way to test the bounce is to revert to original theme.

1 Like
3

How would I do that?

4

Hi! That bounce usually happens when a sticky header has extra code or scripts affecting its position. The header is bouncing because when it becomes fixed, it’s pulled out of the normal layout flow, causing the content beneath it to jump up. Usually, adding top padding to the main content area equal to the header’s height reserves that space and stops the shift. Checking these things often helps resolve the issue.

5

It seems to be the items I have on my header not the header itself that is jumping. I’ve tried fixes with the sticky header and that doesn’t seem to fix it. I’m wondering if this issue is happening because of javascript I may have used for placement of the items. Does anyone know of any code to override the jump from the javascript if that is the case or know of any other fixes?