How to add announcement bar on top of transparent header? Dawn theme

Store Design
, ,

Topic summary

A user needed help positioning an announcement bar above a transparent header in Shopify’s Dawn theme. The initial CSS code made the header transparent but caused it to cover the announcement bar.

Initial Solution:

  • Adding z-index: 1000 to the announcement bar section resolved the layering issue, making it appear above the transparent header.

Secondary Issue:

  • The user also needed different header styles: white logo/text with no separator on the homepage, and black logo/text with a separator on all other pages.
  • Previous code caused the menu and cart icons to disappear when removing the separator line.

Final Solution:

  • Updated CSS using conditional logic ({% if template.name == "index" %}) to apply different styles based on page type.
  • Homepage: transparent header, white elements, no border.
  • Other pages: regular header, black elements, visible separator.

Status: Issue resolved successfully. The user confirmed both solutions worked as intended.

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×159 48.2 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 %}

2

Great job!
To make the announcement bar appear above the transparent header you need to adjust the z-index value. Here is the updated code.

{% if template == 'index' %}

{% endif %}
1 Like
3

@TheScriptFlow

Thank you so much ! This works !

I have one more thing which I really need. I added the code below to be able the header at all the pages except the home page to turn with black color logo, menu cart sign and menu sign.. ( Since at first place I turned the home page with white logo and text at the header, then at all other pages they weren’t visible because there the background was also white) After this code, I cant turn off the separator line at the header home page because the menu sign and the cart sign disappears from all the other pages - i guess they turn to white color again.

How could I remove the separator line on my home page now, so the header text color and logo to stay black at all the other pages?

The code:

{% if template.name != “index” %}

.header-wrapper--border-bottom * { color: black !important; }

{% endif %}

4

I am happy that I could fix the issue.

Now I understand your another requirements. You want.

  1. Home Page: Transparent header with white logo /text with no separator line.
  2. Other pages: Regular Header with black logo and visible separator line.

In order to achieve this here is the code that I update for you.

{% if template.name == "index" %}
  
{% else %}
  
{% endif %}

Let me know if this fulfill your requirements.

Thanks

1 Like
5

@TheScriptFlow You are awesome ! It all workout again ! Thank you thousand times, God bless you ! :slightly_smiling_face:

6

You are most welcome Jim3.

7

Hey ! Ive got the same problem for my announcement bar but i dont see your code anymore ! ^^ Is it possible that you send me the code you sent to Jim3 Merchant please ? would be awesome !!