How to add announcement bar over transparent header?

Store Design
, ,

Topic summary

A user implemented CSS code to create a transparent header on their Shopify store’s homepage, but this caused the announcement bar to be hidden behind the header.

Current Issue:

  • The transparent header CSS (using position: absolute) overlays the announcement bar
  • A screenshot demonstrates the problem visually

Attempted Solution:

  • Another user suggested adding padding-top: 50px to the .header-wrapper class
  • The original poster confirmed this approach did not resolve the issue

Status: The problem remains unresolved, with the user still seeking a working solution to display the announcement bar above the transparent header.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I added the code bellow to make my header transparent. The problem is that now the announcement bar is covered by it. How could I have the announcement bar over the transparent header?

Kind regards, Jim

Screenshot (297).png
Screenshot (297).png496×854 350 KB

{% if template == ‘index’ %}

.shopify-section-group-header-group.announcement-bar-section{ height: 5px; } .header-wrapper{ position: absolute; width: 100%; background: transparent; } .header-wrapper .header{ margin-top: 20px; }

{% endif %}

1 Like
2

@Jim3 - add padding-top to header wrapper and check

.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
padding-top:50px;
}
3

No. This is not doing good. I tried it already