Create simple sticky bar with cookie close button
Hello, in this one I’ll show you how to easily create a sticky bar with close button using cookies for your WordPress site or WooCommerce store. The sticky bar is really useful if you want to promote a product, service, landing page, site notice, cookie notice or anything you need. The sticky bar can be site wide or displayed on specific pages.
Kukie.io: Cookie Consent Made Simple – get cookie consent banner for your website.
For this to work, we’ll need:
- HTML structure,
- CSS to style it beautifully for desktop & mobile,
- JavaScript to handle the cookie.
For the demo I’ll create a bottom sticky bar to promote a product on my WooCommerce store like this:
HTML bottom sticky bar
Add the structure bellow to your footer.php in your WordPress child theme. (This can be used on any site as well).
<div id="sticky-bar">
<img src="https://demo.webroom.tech/wp-content/uploads/2020/02/webroom-tshirt.png" style="height: 40px; display: inline; vertical-align: top;"> <span style="font-weight:bold">Awesome Orange T-Shirt Now 50% OFF</span> <span style="font-weight:bold"><a class="button orange" href="https://www.demostore.com/tshirt/">Get It Now</a></span> <a href="JavaScript:void(0)" onclick="createCookie('sticky-bar-cookie', true, 1)" id="closeprem" style="position: absolute; top: 15px; right: 20px;"><i style="font-size: 24px;color: initial;" class="far fa-times-circle" aria-hidden="true"></i></a>
</div>Add CSS style to the bar to make it sticky and beautiful
#sticky-bar {
position: fixed;
bottom: 0;
display: block;
background: #fff;
padding: 10px;
width: 100%;
text-align: center;
border-top: 1px solid#ddd;
z-index: 99999;
height: 60px;
line-height: 38px;
}
#sticky-bar .orange {
padding: 0px 20px;
border-radius: 5px;
margin-left: 50px;
background: #f45440;
color: #fff;
}Regarding the style of the sticky bar you are free to make it top sticky, make it not sticky at all, or make it look like a rectangle in the bottom right corner.
Finally add JavaScript to handle the sticky bar cookie behavior.
Clicking the X on the sticky bar will save a cookie and hides the bar from the site. As long the cookie is present, the sticky bar won’t show. The code below creates reads the cookie. There is a function to erase the cookie if you need (not called in the demo here).
<script>
if (readCookie("sticky-bar-cookie")) {
document.getElementById('sticky-bar').style.display = 'none';
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
document.getElementById('sticky-bar').style.display = 'none';
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
Related Articles
If you enjoyed reading this, then please explore our other articles below:
More Articles
If you enjoyed reading this, then please explore our other articles below:
2019-2026 ©