Theme Conflicts and Mobile Rendering Issues
Bar overlapping the header, sitting behind sticky elements, or breaking on iOS Safari? Here's the fix.
Flexibar is built to work with every Shopify theme - Dawn, Refresh, Symmetry, Impulse, Prestige, Warehouse, Motion, and the long tail of premium themes. But every now and then a theme overrides global header styles in ways that cause the bar to overlap, sit behind a sticky header, or render incorrectly on iOS Safari. Here are the fixes.
Symptom: bar overlapping the header logo
Cause: theme has a sticky header with its own z-index that doesn't account for the bar above it.
Fix:
- Open Flexibar bar settings → Display → Position.
- Switch from "Below header" to "Above header (push down)".
- If the theme still overlaps, enable Force header offset - Flexibar will inject a CSS rule that pushes the header down by the bar's height.
Symptom: bar sitting behind a sticky element on scroll
Cause: theme uses a high z-index on the sticky header (often 9999 or higher).
Fix:
- Open Flexibar → Display → Advanced.
- Increase the bar's z-index to
2147483646(max safe integer).
Symptom: bar broken on iOS Safari
Cause: usually the theme uses position: -webkit-sticky which conflicts with bar positioning.
Fix:
- In Flexibar → Display → Mobile, switch position to "Fixed top" instead of "Sticky".
- If the bar still jumps on scroll, enable iOS scroll fix in advanced settings.
Symptom: bar not visible on /products/* but visible elsewhere
Cause: product page template wraps the header in a different container that has its own overflow rules.
Fix: enable Page template detection - Flexibar will auto-attach to the correct container per template.
Last resort: custom CSS
If a theme is genuinely incompatible, paste a custom CSS rule in Flexibar → Display → Custom CSS. Common one-liner that fixes 80% of remaining issues:
#flexibar-root { z-index: 2147483646 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }If that doesn't fix it, send your theme name and store URL to support - we maintain a per-theme override library and can ship a tested rule.
Ready to put this into practice?
Install Flexibar and create your first AI-powered announcement bar in under 60 seconds. Free plan available.
Install Flexibar - Free Plan