Note: Please read the instructions on how to use this marquee…

1) Delete the second section inside the row.
2) Edit/replace the content of the remaining section.
3) Duplicate your section so you end up with two identical sections.
4) View on the front end to see your marquee in action.

Important note: In order to retain equal spacing, the left padding and the gutter value of the section must be the same. In this demo the left padding and the gutter value are both 25px. If you change the left padding, change the gutter to match, and vice versa.

The CSS is inside the Custom CSS box in the parent row. At the top you will see the following two CSS variables:

:root {
  –bb-marquee-1-speed: 20s;
  –bb-marquee-1-hover: paused;
}

The first variable controls the speed of the marquee. Decrease the value to speed up, increase the value to slow down.
The second variable controls whether or not the marquee pauses when hovered. If you do not want to pause on hover, change the ‘paused‘ value to ‘running‘

This is a CSS text marquee

But it’s not just for text

In theory, you could put any blocks in here

But traditionally, marquees are for displaying rolling text

So we’ll stick with text for this marquee

This is a CSS text marquee

But it’s not just for text

In theory, you could put any blocks in here

But traditionally, marquees are for displaying rolling text

So we’ll stick with text for this marquee