Announcement Bar

Ultimate top bar to announce sales that draw the attention of your visitors and engages them to subscribe, know important announcements, shipping cost and estimated delivery, ...

1 - Add bar

If you add 2 or more content it will switch to a slider.

1.1 - Sticky

Displayed on sticky header

1.2 - Space settings

Space settings

Responsive (Swiper slide)

2 - Example

Ex 1:

<div class="d-flex justify-content-center align-items-center">
    <p class="pr-2">Summer Sale Extra <strong>25% OFF</strong> with code <strong>SM2018A</strong></p>
    <a href="#" class="btn btn-minwidth-auto btn-rounded btn-outline-white" style="line-height: 1.25;">SHOP NOW</a>
</div>

Ex 2:

<div class="d-flex justify-content-center align-items-center">
    <p class="pr-2">Summer Sale Extra <strong>25% OFF</strong> with code <strong>SM2018A</strong></p>
    <div class="pr-2">
        <div class="kt_countdown style02" data-time="2021/10/26 12:00:00"></div>
    </div>
    <a href="#" class="btn btn-minwidth-auto btn-rounded btn-outline-white" style="line-height: 1.25;padding: 0.35rem 1rem;">SHOP NOW</a>
</div>

With css custom:

.announcement-item .kt_countdown.style02 {
    background-color: #fff;
    border-radius: .3rem;
    padding: 0 1rem;
}
.announcement-item .kt_countdown.style02 span.flip-top {
    font-size: 1.4rem;
}