FLOW Theme - Modify the announcement bar

Solved
Highlighted
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
Highlighted
Shopify Partner
2730 595 738

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
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
Highlighted
Shopify Partner
2730 595 738

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
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
Highlighted
Shopify Partner
2730 595 738

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Shopify Partner
2730 595 738

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
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
Highlighted
Excursionist
33 0 5

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

Thanks alot for your help!

1 Like
Highlighted
Excursionist
33 0 5

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

1 Like