How do I get my announcement bar not to be transparant?

[Muselabel]

Hello,

I made my header transparent, but now my announcement bar is also transparent. How do I get rid of this?

I used this code:

1. {% if template == 'index' %}
3. <style>
4. .shopify-section-group-header-group.announcement-bar-section{
5. height: 5px;
6. }
7. .header-wrapper{
8. position: absolute;
9. width: 100%;
10. background: transparent;
11. }
12. .header-wrapper .header{
13. margin-top: 20px;
14. }
15. </style>
17. {% endif %}

The link of my store: https://muselabel.nl/ 

[pawankumar · Accepted solution]

Hi @Muselabel 
Please remove this code

.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}

and then it will look like this

I hope, it will help you
Thanks!

[pawankumar · Accepted solution]

Hi @Muselabel 
Please remove this code

.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}

and then it will look like this

I hope, it will help you
Thanks!

[Muselabel]

Thank you very much! It worked.

[BSS-TekLabs · Accepted solution]

Hi @Muselabel,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

#shopify-section-sections--22841790234948__announcement_bar_KFVM8G {
    height: auto;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!