FLOW Theme - Modify the announcement bar

Solved
Theo12
Excursionist
33 0 5

Hey,

I'm new to shopify and I have very little knowledge of coding. Is there a way to modify the announcement bar but only when you load the site on a phone or tablet? For example: Change the background color to grey when the site is loaded on a phone but keep it as white when loaded on pc. Or remove some of the text when it's loaded on a phone.

Any tips or help would be much appreciated!

0 Likes
dmwwebartisan
Shopify Partner
4448 1002 1276

Hey @Theo12,

Please share the website URL. Also, let me know which theme you are using?

I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Theo12
Excursionist
33 0 5

Hey, thanks for the reply.

I'm using Flow Theme (It's in the title).

spart-posters.myshopify.com
Password: thauff

0 Likes
dmwwebartisan
Shopify Partner
4448 1002 1276

Hey @Theo12,

Please add the following code at the end of your assets/custom.css file.

@media (max-width: 992px){
.notification-bar{ background-color:808080; color:#ffffff; }
}

 

This will work for mobile devices. Also, you can change colors as per your need.

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Theo12
Excursionist
33 0 5

Thanks again for the reply!

I doesn't seem to work though. I put that code at the bottom of my assets/custom.css file and when I load the page on a phone the announcement bar is still white. 

Also, is there a reason for there not being a "#" infront of 808080?

0 Likes
dmwwebartisan
Shopify Partner
4448 1002 1276

Oh! sorry, that was my bad!

Please add this.

@media (max-width: 992px){
.notification-bar{ background-color:#808080; color:#ffffff; }
}

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4448 1002 1276

This is an accepted solution.

Hey @Theo12,

I checked your site. Please remove last code and use this code instead.

@media (max-width: 992px){
.notification-bar{ background-color:#808080 !important; color:#ffffff !imprtant; }
}
If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Theo12
Excursionist
33 0 5

I already tried that but it still doesn't do anything.

I tried opening F12 and I put the line of code at the bottom under <div id="sopify-sectio-announcement-bar" class="shopify-section">/<style>. That worked but I have no idea how to actually use it.

0 Likes
Theo12
Excursionist
33 0 5

That works. I guess it's supposed to be "!important" on the second part aswell.

Thanks alot for your help!

Theo12
Excursionist
33 0 5

Do you know if there is a way to change the text on phone aswell?