How to Create a Notification Bar in Kadence Theme?

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.
Create a Notification Bar in Kadence Theme

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.
Kadence Notification Bar Element Settings

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 CSSCopy 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.

Notification Bar Code for Kadence Theme

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.

Kadence Notification Bar Result

Related Reading:

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!

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

Leave a Comment