Solved

How can I make my symmetry theme announcement bar transparent?

Kathy518
Explorer
91 1 16

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

Accepted Solutions (2)
made4Uo
Shopify Partner
3821 716 1151

This is an 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_0-1679337863557.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

made4Uo
Shopify Partner
3821 716 1151

This is an 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;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 9 (9)

made4Uo
Shopify Partner
3821 716 1151

Hi @Kathy518,

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kathy518
Explorer
91 1 16
made4Uo
Shopify Partner
3821 716 1151

This is an 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_0-1679337863557.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kathy518
Explorer
91 1 16

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
Shopify Partner
3821 716 1151

This is an 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;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kathy518
Explorer
91 1 16

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
Shopify Partner
3821 716 1151

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kathy518
Explorer
91 1 16

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

Kimmo_Scholz
Visitor
1 0 0

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?