Please share your store URL so I can check
Topic summary
Mobile announcement bar overlaps the header on small screens, hiding navigation and cart buttons. The issue occurs on specific store pages and themes, and is particularly visible on mobile.
Initial suggestion was to add code in theme.liquid before the closing , but details of that snippet were not provided and it did not resolve the problem for at least one theme (Craft); it instead hid the logo and menu.
A targeted CSS fix was later proposed: add a media query for screens up to 749px that applies padding-top (52px) to the .header, inserted after in theme.liquid. This aims to offset the header to account for the announcement bar’s height.
Key terms:
- Announcement bar: the top promotional/message strip.
- theme.liquid: Shopify’s main layout file where global HTML/CSS can be added.
- Media query: CSS rule that applies styles based on screen size.
Links were shared to a product page and another store for review, with a note that the logo is only visible after scrolling on mobile.
Status: No confirmation yet that the CSS fix resolves the issue across themes; discussion remains open.