Molla
Search
K

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

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;
}