how to fix?
Topic summary
A user is experiencing a layout issue where three elements overlap incorrectly: an announcement bar overlaps the header, which in turn overlaps a slideshow banner.
Proposed Solution:
- Another user suggests adding CSS code to the
base.cssfile - The fix involves:
- Making the announcement bar fixed position with 100% width (for screens 1024px+)
- Adjusting the header wrapper when sticky
- Adding top margin to the slideshow component
Status:
- Solution provided but not yet confirmed as tested or working
- The issue appears to be theme-specific on a Shopify store
@niceeee add below css into base.css file
@media only screen and (min-width: 1024px) {
div#shopify-section-sections--16013134430399__announcement-bar {
position: fixed;
width: 100%;
}
.shopify-section-header-sticky .header-wrapper {
background: #28828D!important;
margin-top: 38px;
position: fixed;
width: 100%;
}
slideshow-component {
margin-top: 166px;
}
}
