How can I make my symmetry theme announcement bar transparent?

[Kathy518]

My theme is symmetry. I want to make the blue announcement bar become transparent. How  can I edit the code. Thank you!

[made4Uo · Accepted solution]

Hi @Kathy518,

Thank you for the information. You can try the code below to have your announcement bar transparent.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the styles.css file
3. Add the code below at the very end of the file

div#shopify-section-announcement-bar {
    position: absolute;
    height: 100px;
    width: 100%;
    display: block;
    background: transparent;
}

div#section-id-announcement-bar {
    background: transparent;
    color: #fff;
}

.announcement-bar__left.desktop-only .social-custom > img {
    filter: invert(1);
}

See the result here

[made4Uo]

Hi @Kathy518,

Can you provide your website so we can provide a code specific for you? Thank you

[Kathy518]

https://phantomgogo.com/

[made4Uo · Accepted solution]

Hi @Kathy518,

Thank you for the information. You can try the code below to have your announcement bar transparent.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the styles.css file
3. Add the code below at the very end of the file

div#shopify-section-announcement-bar {
    position: absolute;
    height: 100px;
    width: 100%;
    display: block;
    background: transparent;
}

div#section-id-announcement-bar {
    background: transparent;
    color: #fff;
}

.announcement-bar__left.desktop-only .social-custom > img {
    filter: invert(1);
}

See the result here

[Kathy518]

Thank you for the help. It works. But I saw the position is very close to the navigation (main menu), how to change it? Thanks  

[made4Uo · Accepted solution]

Hi @Kathy518,

Please add the code below to provide space.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the styles.css file
3. Add the code below at the very end of the file

div#pageheader.pageheader--transparent {
    top: 1rem;
}

[Kathy518]

Thanks, it works. Also, I have one more questions about this announcement bar. If I want to put the social media icon to the right, just before the USD. How do I add the code?

[made4Uo]

Hi @Kathy518,

It looks like you can change placement using your theme editor. Please utilize those before using the code. 

From you Admin page > Go to Online store > Themes > Click Customize. Check the announcement section

[Kathy518]

Got it. Thank you for your help. Appreciated it!

[Kimmo_Scholz]

Hi, i also want to make my announcement bar transparent but I do not have the styles.css file, my theme is the impact theme?