Sometimes you’ll have important information and links inside the footer of a website, and making that visible all the time can be really important!

This tutorial will teach you how to use CSS to make sure the footer of your site is always visible.

We’ll use the CSS codes below to make this magic happen for the entire footer, and you’ll learn how to isolate individual footer sections too.

Here are the different codes from this tutorial:

Make the entire footer always visible:

#footer-sections {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}

Make the last section of the footer always visible:

#footer-sections .page-section:last-of-type {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}

Make the first section of the footer always visible:

#footer-sections .page-section:last-of-type {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}

Make the second section of the footer always visible:

#footer-sections .page-section:nth-child(2) {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}

Want to add a border? Include this code before the final bracket:

border-top: 1px solid #000

Want to add a box shadow? Add this code before the final bracket:

box-shadow: 0 -5px 15px #333