How to Create a Sticky Footer Bar in Kadence Theme?

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

Kadence Sticky Footer Bar Features

  • 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
Create a Sticky Footer Bar in Kadence Theme

Steps to Create a Sticky Footer Bar in Kadence Theme without a Plugin

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:

  1. Go to Appearance > Kadence > Activate Hooked Elements Addons.
  2. Again go to Appearance > Kadence > Elements.
  3. Click on Add New Elements.
  4. Select HTML Editor and go to Elements Settings location near the Publish button.
  5. Choose Placement as After Footer.
  6. Under Display Settings > Show on Entire Site.
  7. Give a title to your footer bar and start pasting the code from step 1. The full code is available down below.
Kadence Sticky Footer Bar Element Settings

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>

Step 2: Add CSS to Style the Footer Bar

Now, we are going to style our sticky footer 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).

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

Step 3: Add JavaScript to Dismiss the Footer Bar

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>

Step 4: Full Code to Add a Sticky Footer Bar in Kadence Theme

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

Kadence Sticky Footer Bar Result

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.

Customize the Sticky Footer Bar

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!

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