How can I make my symmetry theme announcement bar transparent?

Store Design
1

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

ζˆͺ屏2023-03-20 上午9.44.37.png
ζˆͺ屏2023-03-20 上午9.44.37.png1251Γ—217 204 KB

1 Like
2

Hi @Kathy518 ,

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

3

https://phantomgogo.com/

4

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_0-1679337863557.png
made4Uo_0-1679337863557.png1906Γ—811 216 KB

5

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

6

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;
}
7

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?

8

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

9

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

1 Like
10

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?