In this tutorial, we are going to create a notification bar in Kadence theme without using any plugin. We’ll be utilizing the custom Hooked Elements available in Kadence Pro bundle.
Here’s what you’ll learn:
- How to make the notification bar sticky?
- Using JavaScript to dismiss the notification bar.
- Adding a custom HTML and CSS code to the style notification bar.
Kadence Notification Bar Features
- No jQuery dependency.
- Pure JavaScript for dismissibility.
- Sticky or static positioning options.
- Dismissable with close button.
- Works on mobile, tablet, and desktop.
- Great for promotional offers or announcements.

Steps to Create a Notification Bar in Kadence Theme without a Plugin
We’ll use a combination of HTML, CSS, and JavaScript to create a dismissible notification bar. Before getting started you need features from the Pro version so, get it here.
After installing it
- Go to Appearance > Kadence > Activate Hooked Elements Addons.
- Again go to Appearance > Kadence > Elements.
- Click on Add New Elements.
- Select HTML Editor and go to Elements Settings location near the Publish button.
- Choose Placement as Before Header
- Under Display Settings > Show on Entire Site.
- Give a title to your notification bar and start pasting the code from step 1. The full code is available down below.

Step 1: Add HTML Markup
Paste the following HTML code in the HTML Editor area:
<div id="wplogout-top-bar-notification">
<div class="notice-inner grid-container">INSERT YOUR NOTIFICATION HERE! <a href="ENTER YOUR URL HERE" target="_blank">INSERT YOUR LINK Text HERE</a><button id="wplogout-closebar" type="button">X</button>
</div>
</div>
Step 2: Add JavaScript to dismiss the notification bar
Just below the HTML Code paste the following JavaScript code for the Kadence notification bar.
<script>
document.getElementById("wplogout-closebar").onclick = function() {
var z = document.getElementById("wplogout-top-bar-notification");
if (z.style.display == 'none') {
z.style.display = 'block';
} else {
z.style.display = 'none';
}
}
</script>
This adds a click event listener to the close button that hides the notification bar when clicked.
Step 3: Style the Notification Bar
Now, we are going to style our notification bar. Go to Appearance > Customize > Additional CSS. Copy and Paste the following code. or simply paste CSS Code directly into the HTML Editor (Check the full code and screenshot down below).
#wplogout-top-bar-notification {
text-align: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 9999;
border-bottom: 3px dashed #eaf1f8;
background-image: linear-gradient(to left, #E100FF, #7F00FF)!important;
color: #fff;
font-size: 15px;
padding: 7px 0px;
}
.admin-bar #wplogout-top-bar-notification {
top: 32px;
}
#wplogout-top-bar-notification a {
border-bottom: 2px dotted;
color: #fff;
}
#wplogout-closebar {
float: right;
padding: 5px 9px;
border-radius: 15px;
background-color: #eee;
color: #34495e;
line-height: 1em;
}
Customize the styles as needed to match your branding.
Step 4 (Optional): Make the Notification Bar Sticky
If you want the notification bar to stick to the top of the viewport, add the following CSS:
@media (min-width: 768px) {
#notification-bar {
position: sticky;
top: 0;
z-index: 999;
}
}
This makes the notification bar sticky on screens larger than 768px wide.
Step 5: Full code to add notification bar in Kadence Theme
<style>
#wplogout-top-bar-notification {
text-align: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 9999;
border-bottom: 3px dashed #eaf1f8;
background-image: linear-gradient(to left, #E100FF, #7F00FF)!important;
color: #fff;
font-size: 15px;
padding: 7px 0px;
}
.admin-bar #wplogout-top-bar-notification {
top: 32px;
}
#wplogout-top-bar-notification a {
border-bottom: 2px dotted;
color: #fff;
}
#wplogout-closebar {
float: right;
padding: 5px 9px;
border-radius: 15px;
background-color: #eee;
color: #34495e;
line-height: 1em;
margin-right: 20px;
}
@media (min-width: 768px) {
#notification-bar {
position: sticky;
top: 0;
z-index: 999;
}
}
</style>
<div id="wplogout-top-bar-notification">
<div class="notice-inner grid-container">INSERT YOUR NOTIFICATION HERE! <a href="ENTER YOUR URL HERE" target="_blank">INSERT YOUR LINK Text HERE</a><button id="wplogout-closebar" type="button">X</button>
</div>
</div>
<script>
document.getElementById("wplogout-closebar").onclick = function() {
var z = document.getElementById("wplogout-top-bar-notification");
if (z.style.display == 'none') {
z.style.display = 'block';
} else {
z.style.display = 'none';
}
}
</script>
Here is the full code and you can check the settings in this screenshot.

Step 6: Result
Now you should see a notification bar displayed before the header area on your Kadence site.
The bar can be dismissed by clicking the close button, and you can customize the styles to match your site’s branding.

Related Reading:
- How to Remove URL Field from Comment Form in Kadence Theme?
- How to Display Related Posts in Kadence Theme?
- How to Add Social Sharing Buttons in Kadence Theme without Plugin?
Conclusion
You can easily create a notification bar for announcements or promotions using the HTML Editor in Kadence, along with pure HTML, CSS, and JavaScript.
This lightweight solution doesn’t require any additional plugins and can be easily customized to suit your needs.
Let me know if you have any other questions or need further assistance!