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

Store Design
, ,
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 %}
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

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 !!