Help me fix my broken scrolling announcement banner!

[Lizzo333]

Hi there!

I'm using Dawn theme. 

My URL is https://www.outerlayer.com.au/ and password to access is xxxx

The announcement banner on my homepage and my product page template is broken and appearing like this:



It should be scrolling slowly with 6 separate messages. 

Are you able to help me understand what's happened and how to fix this? 

Thank you so much!

Lizzy 

[tim]

This rule you've added earlier makes it yellow on yellow:

      .focus-none span {
         background: #fffdf2 !important;
      }

You need to be careful adding overly broad rules like this which may affect multiple elements.

If you can't come up with a better selector -- add them into sections "Custom CSS", this will make them more targeted.

[websensepro · Accepted solution]

Hi @Lizzo333 ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.ss-announcement-bar__message {
    background: #8a1a46 !important;
}
</style>

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[Lizzo333]

Awesome @websensepro that worked perfectly – thank you! 🙂 

[Lizzo333]

@websensepro I have another question for you regarding the same scrolling announcement bar.

The bar appears like this usually:

But when you hover over it, the colour disappears – it doesn't look good:



Do you know how to remove this effect when hovering over the bar? I want the colour to remain the same when the user hovers over it. 

Thank you!!!

[tim]

There is this rule in the section you've added:

  .ss-announcement-bar:hover {
    opacity:0.100;
  }

You can remove it, or add a rule like this to this sections   "Custom CSS" setting:

  .ss-announcement-bar:hover {
    opacity:1;
  }

or even:

  .ss-announcement-bar:hover {
    opacity: 1 !important;
  }

 if previous does override existing rule.