Solved

Can I make the announcement bar transparent on Shopify?

Rubberduck
Shopify Partner
59 0 11

Hello!

Is there anyone here that know how i can make the annoucement bar transparant?

Thank you!

Skjermbilde 2022-11-13 kl. 15.44.20.png

Accepted Solution (1)
suyash1
Shopify Partner
9077 1129 1479

This is an accepted solution.

@Rubberduck - please add the given css to the very end of your theme.scss file and check

 

#section-announcement {
    background: transparent !important;    color: #fff !important;    position: absolute;    width: 100%;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 7 (7)

suyash1
Shopify Partner
9077 1129 1479

@Rubberduck - can you please share your site link? it needs css

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Rubberduck
Shopify Partner
59 0 11

Hello!

The website link: Nexwatches.no


suyash1
Shopify Partner
9077 1129 1479

@Rubberduck - your age background is white, so it will still show white only

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Rubberduck
Shopify Partner
59 0 11

How do i make it transparant?

suyash1
Shopify Partner
9077 1129 1479

@Rubberduck - you can make like 1st screenshot , but I do not recommend it as on hover, header will hide announcement bar

 

suyash1_0-1668353530861.png

 

suyash1_1-1668353573102.png

 

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Rubberduck
Shopify Partner
59 0 11

How do i make it like the first picture?

suyash1
Shopify Partner
9077 1129 1479

This is an accepted solution.

@Rubberduck - please add the given css to the very end of your theme.scss file and check

 

#section-announcement {
    background: transparent !important;    color: #fff !important;    position: absolute;    width: 100%;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI