How to add top banner on a page

This simple guide will show you how to add top banner on a page.

Step 1

Copy this code:

<div class="topbar-wrap">
<div class="topbar">
I would like to write: hot blog posts are published. <a href="https://google.com" target="_blank"><b>Read more</b></a>.
</div>
</div>

<style>
#other-01-784161 {
position: absolute;
width: 100%;
top: 0;
z-index: 9999;
}
.topbar-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background-color: #303030;
text-align: center;
}
.topbar {
color: black;
font-weight: 500;
color: #ffffff;
}
.topbar a{
color: inherit;
}
.nav-02 {
padding-top: 60px;
}
</style>

Step 2

On the required page, create a Custom HTML component.

Step 3

Paste copied code in a Custom HTML component editor.

Step 4

In the code, you need to change the id to the id of your Custom HTML component

Step 5

Replace the text and link in the code with ones that are suitable for you.

Done!

Your page now has a top banner.

Updated on: 30/08/2023