Overlapping Announcement on Header

Shopify Discussion

Topic summary

A Shopify store owner is experiencing a layout issue where the announcement bar overlaps with the header when scrolling. They want the header to remain fixed and visible at all times during page scrolling.

Attempted Solution:
Another user provided CSS code to fix both the announcement bar and header using position: fixed with appropriate z-index values and body padding adjustments.

Current Status:
The proposed CSS solution did not resolve the issue. The original poster is still seeking help, and the problem remains unresolved. An image was shared showing the overlapping behavior, which appears central to diagnosing the specific layout conflict.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
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