A user implemented CSS to make their announcement bar sticky but encountered an issue where it overlaps the sticky header on scroll.
Problem Details:
position: sticky; top: 0; to .announcement-bar-sectionProposed Solutions:
Two community members offered CSS fixes:
First approach: Add margin-top to the header element in base.css:
margin-top: 42px !important;Second approach: Adjust the header’s top position via Custom CSS:
.shopify-section-header-sticky { top: 43px !important; }Both solutions push the header down to prevent overlap with the sticky announcement bar. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
Hi there,
I added the following code to make the announcement bar sticky-
.announcement-bar-section {
position: sticky;
top: 0;
}
But now when the announcement bar is sticky it is covering the sticky header which transparent(not transparent on scroll)
Website - https://www.valcoure.store/
Password - kothavara
Thank You
Hi @AnSrSi
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account {
margin-top: 42px !important;
}
Result
Best,
DaisyVo
