A top header scrolling notice is useful when you need to catch the user’s attention. Using the Kadence theme, this feature can be built with HTML + CSS animation.
Here is a preview of the result:
How to build an Infinite NewsTicker (Marquee) using Kadence Blocks

Step 1: setting an HTML element
Go to Appearance – Kadence – Elements, and create a new HTML element. It can be set on the whole website, but for Demo purposes, I used it just for a single page

Step 2 – Adding the HTML code
Add the HTML code to the HTML Element: there is a container div with 2 or more child elements.
/*HTML*/
<div class="marquee">
<div class="marquee__item">
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
</div>
<div class="marquee__item">
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
Lorem Ipsum Dolor Sit Amet
<span class="marquee__seperator">*</span>
</div>
</div>
Step 3 – Adding the CSS
Add the CSS to Customizer – Custom CSS, or Child Theme – style.css.
/* CSS for Scrolling NewsTicker */
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
animation-play-state: running;
color: #ffffff;
padding: 10px;
margin: 0 auto;
}
.marquee:hover .marquee__item,
.marquee__item:hover {animation-play-state: paused!important}
.marquee__item {
display: inline-block;
will-change: transform;
animation: marquee 40s linear infinite;
animation-play-state: running;
}
.page-id-1182 .site-header-row-container-inner .site-container {padding: 0!important;}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
Step 4: Adding the shortcode
Using the KAdence Theme’s header editor, add the shortcode for desktop & mobile versions.

The HTML+CSS I used, is based on this CodePen:
You can find the preview of the result on my Kadence Demo Live – Scrolling Newsticker Marquee.