code scrolling announcement bar

[matthewdropship]

hi guys! would someone help me give me the code for the grey (scrolling) ad bar present on this site under the black menu?

https://oliviamoreau.de/

[Emma_Techstudio]

This creates a scrolling grey announcement bar (marquee-style) below the main menu:

<!-- Add this to your theme.liquid file, right after the header/menu section -->

<div style="background-color: #e0e0e0; overflow: hidden; white-space: nowrap; padding: 10px 0;">

  <div style="display: inline-block; animation: scroll-left 20s linear infinite;">

    <span style="font-size: 16px; color: #333;">

      FREE SHIPPING ON ORDERS OVER $50 — NEW COLLECTION JUST DROPPED — SIGN UP FOR 10% OFF — 

    </span>

  </div>

</div>

<style>

@keyframes scroll-left {

  0% { transform: translateX(100%); }

  100% { transform: translateX(-100%); }

}

</style>

Instructions:

You can place this code below your navigation bar in theme.liquid or header.liquid.

Replace the text inside the <span> with your own ad messages.

[matthewdropship]

thanks for the help guys! If you notice in the website the words don't scroll as in the code here but on the site the sentence stays still and then scrolls after a number of seconds, how can I get that effect?

[devcoders]

Hello @matthewdropship 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

.section-sections--24711802061125__ss_announcement_bar_slideshow_fXAAqw-settings {
background: gray;
}