Theme Conflicts and Mobile Rendering Issues

Shopify themes vary wildly in how they handle the area above the header. Dawn, Impulse, Prestige, and Symmetry each implement sticky headers differently, which means a perfectly configured announcement bar can still overlap or sit behind elements on certain themes. Here's how to diagnose and fix the most common issues.

1. Bar overlapping the header

Symptom: bar renders on top of the logo or navigation.
Cause: theme has a fixed header without enough top offset.
Fix: open Flexibar's bar settings → Position → enable Push content down. This adds padding to the body so the header shifts below the bar.

2. Bar sitting behind sticky elements

Symptom: bar exists in the DOM but is hidden behind the cart drawer, search modal, or sticky header.
Cause: z-index conflict.
Fix: in Flexibar's Advanced settings, raise the bar's z-index to 9999. If the cart drawer still wins, raise to 99999. Don't go higher than that — you'll start hiding browser UI.

3. iOS Safari address bar gap

Symptom: bar leaves a gap at the top on iOS when the address bar collapses on scroll.
Cause: iOS Safari's dynamic viewport (svh, lvh, dvh).
Fix: Flexibar uses position: sticky by default which handles this correctly. If you've manually set position to fixed via custom CSS, switch back to sticky.

4. Bar disappears after theme update

Symptom: bar worked, then vanished after you saved a theme change.
Cause: theme update reset the App Embed toggle.
Fix: Online Store → Themes → Customize → App embeds, re-enable Flexibar, save.

5. Mobile bar wrapping to two lines

Symptom: copy that fits one line on desktop wraps awkwardly on mobile.
Cause: copy too long for narrow viewport.
Fix: in Flexibar's bar settings, enable Device-specific copy and write a shorter mobile version (under 30 characters).

6. Marquee stuttering on Android Chrome

Symptom: scroll animation pauses or jumps on some Android devices.
Cause: low-power mode or battery saver throttling animations.
Fix: this is browser behavior, not a bug. Marquee resumes at full speed when battery saver is off. For consistent UX on low-end devices, switch to a static or rotating bar instead.