Sticky footer notification
Article

How to Create Fixed Sticky Footer Notification Bar in HTML

This fixed bottom notification bar is compatible for all browsers. But we need to avoid it in mobile screen because fix the mobile screen and user cannot view the full website easily in small screen device.

Code Implementation:

For sticky bar, We just need to fixed the position. The simple CSS code given below:

01
<style>

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font: 14px/22px ‘robotoregular’,sans-serif;
position: relative;
background-color: #fff;
}
.top_bar
{
background: none repeat scroll 0 0 rgba(0,0,0,0.7);
bottom: 0;
padding: 5px 0;
position: fixed;
width: 100%;
z-index: 10;
height:100px;
}
.fi_bt {
color: #fffc00;
display: block;
font-size: 18px;
font-weight: 600;
margin: 0 0 3px;
text-align: center;
}
</style>

 

Here in this CSS code, We make bottom:0; and position:fixed;. By using this line it always fixed that bar to bottom fixed. we can change the position.

HTML Code Here:

<body>

// Your main code for <body> goes here.

<div class=”top_bar”>

<div class=”fi_bt”>Fixed Bottom Notification Bar</div>

</div>

</body>
By using this simple line of code, we can easily make sticky footer bar.

 

Leave a Reply

Your email address will not be published. Required fields are marked *