The announcement bar on mobile covers my header which includes the navigation buttons on the site. Unable to see cart or navigation buttons because the announcement bar is covering them.
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.
Hi Dan-From-Ryviu
Sadly this is not working for my Craft theme, it’s hiding my logo and menu.
Is there other way around this please?
Please share your store URL so I can check
Hey, hope all is well.
Any luck pls?
On mobile you can’t see the logo unless you scroll down
let me know, thank you!
Preview
Please add this code to theme.liquid file, after
@media (max-width: 749px) {
html .header {
padding-top: 52px !important;
}
}