Sticky announcement bar is covering sticky header on scroll

[AnSrSi]

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

[DaisyVo]

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

[Dan-From-Ryviu]

Please add this code to Custom CSS in Sales channels > Online store > Themes > Customize > Theme settings.

.shopify-section-header-sticky { top: 43px !important; }