In this tutorial, we’ll learn how to create a sticky footer bar in Kadence theme without using any plugin. We’ll be utilizing the custom Hooked Elements available in the Kadence Pro bundle.
What You’ll Learn:
- How to make the footer bar sticky at the bottom of the viewport
- Adding custom HTML, CSS, and JavaScript code to style the footer bar
- Dismissing the footer bar with a close button
- No jQuery dependency
- Pure JavaScript for dismissibility
- Works on desktops only but you can tweak the code for mobile and tablet
- Great for promotional offers, call-to-actions, or announcements

We’ll use a combination of HTML, CSS, and JavaScript to create a dismissible sticky footer bar. Before getting started, you’ll need the features from the Kadence 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 After Footer.
- Under Display Settings > Show on Entire Site.
- Give a title to your footer 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 class="wplogout-fixed-footer">
<div class="wplogout-footer-content">
<p class="wplogout-content"><span>Get Free Access and VIP Support</span><a href="#"><button
class="wplogout-reading-button">Join Facebook Group</button></a></p>
<button class="close-button">X</button>
</div>
</div>
Now, we are going to style our sticky footer 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).
@media only screen and (min-width: 768px) {
.wplogout-fixed-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #8E2DE2;
background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2);
background: linear-gradient(to left, #4A00E0, #8E2DE2);
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.wplogout-footer-content {
display: flex;
align-items: center;
}
.wplogout-content {
margin: 0;
padding-right: 20px;
display: flex;
align-items: center;
}
.wplogout-content span {
margin-right: 10px;
}
.wplogout-reading-button {
background-color: #FF9800;
color: #fff;
border: none;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}
.close-button {
background-color: #666;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
margin-left: auto;
}
.close-button:hover {
background-color: #444;
}
body {
margin-bottom: 30px; /* Change to Match with body*/}
}
@media only screen and (max-width: 767px) {
.wplogout-fixed-footer {
display: none;
}
}
This CSS code styles the footer bar, making it sticky at the bottom of the viewport on screens larger than 768px wide. It also includes styles for the content, button, and close button within the footer bar. You can customize the styles as needed to match your branding.
Just below the HTML code, paste the following JavaScript code for the Kadence to make the footer bar dismissible:
This code adds a click event listener to the close button that hides the footer bar when clicked.
<script>
const closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', () => {
document.querySelector('.wplogout-fixed-footer').style.display = 'none';
});
</script>
<style>
@media only screen and (min-width: 768px) {
.wplogout-fixed-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #8E2DE2;
background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2);
background: linear-gradient(to left, #4A00E0, #8E2DE2);
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.wplogout-footer-content {
display: flex;
align-items: center;
}
.wplogout-content {
margin: 0;
padding-right: 20px;
display: flex;
align-items: center;
}
.wplogout-content span {
margin-right: 10px;
}
.wplogout-reading-button {
background-color: #FF9800;
color: #fff;
border: none;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}
.close-button {
background-color: #666;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
margin-left: auto;
}
.close-button:hover {
background-color: #444;
}
body {
margin-bottom: 30px; /* Change to Match with body*/}
}
@media only screen and (max-width: 767px) {
.wplogout-fixed-footer {
display: none;
}
}
</style>
<div class="wplogout-fixed-footer">
<div class="wplogout-footer-content">
<p class="wplogout-content"><span>Get Free Access and VIP Support</span><a href="#"><button
class="wplogout-reading-button">Join Facebook Group</button></a></p>
<button class="close-button">X</button>
</div>
</div>
<script>
const closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', () => {
document.querySelector('.wplogout-fixed-footer').style.display = 'none';
});
</script>
Step 5: Result
Now you should see a sticky footer bar displayed at the bottom of your Kadence site on screens larger than 768px wide.

The footer bar can be dismissed by clicking the close button, and you can customize the styles and content to match your site’s branding and requirements.
You can easily modify the HTML, CSS, and JavaScript code to fit your needs. Here are a few examples of what you can customize:
- Change the background color or gradient
- Modify the font size, color, and styles
- Adjust the padding and spacing
- Replace the button text and link
- Show or hide the footer bar on specific pages or posts
- Add animations or transitions
Conclusion
You can now create a sticky footer bar for announcements, promotions, or call-to-actions using the HTML Editor in Kadence, along with custom 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!