Overlapping Announcement on Header

Shopify Discussion
1

Hello

Overlapping Announcement on Header upon scrolling .

I want this header stay always while scrolling .

Can someone help me to fix that .

dreamworldeques_0-1749149747580.png
dreamworldeques_0-1749149747580.png1917×798 123 KB

Thank you

2

Hi,

Hope this will work

  • Find and Edit CSS File, add css

CSS example

.announcement-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.header-wrapper {
  position: fixed;
  top: 40px; /* or adjust depending on your bar height */
  width: 100%;
  z-index: 999;
}

body {
  padding-top: 80px; /* make space so content doesn't hide under fixed bar and header */
}

You can customize announcement bar heights as per your requirement

3

tried but no luck with that.

thank you though

4

any help please