Create A Simple Sticky Header or Footer With Bootstrap

This is a very simple and very quick ‘sticky’ header or footer CSS class that you can use with your Bootstrap projects.

I’ve added one extra thing to the sticky header, a dismissible alert close icon, just so that your user has the option to remove it if they like. Similarly you can do the same for the footer. Simply copy paste the HTML for the sticky header as a sticky footer and change the main class name to ‘sticky-footer’.

Here’s the CSS:

.close { color: #fff; text-shadow: none; opacity: 1; }
.close:hover { color: #eee; }
        
.sticky-header {
   background: rgba(0,0,0,0.7);
   position: fixed;
   width: 100%;
   text-align: center;
   color: #fff;
   border-radius: 0;
   border: 0;
   transition: all 0.250s;
}
    
.sticky-footer {
   background: rgba(0,0,0,0.7);
   position: fixed;
   width: 100%;
   bottom: 0;
   text-align: center;
   color: #fff;
   padding: 15px;
   transition: all 0.250s;
}

.sticky-header:hover,
.sticky-footer:hover { background: rgba(0,0,0,0.85); transition: all 0.250s; }

.sticky-footer a { color: #fff; }
.sticky-footer a:hover { color: #1F8AF4; }

I’ve done the liberty of adding it in an example here: Bootstrap sticky header and footer. Please view the source code to see how to integrate it into your theme.

Go ahead and use it wherever you like, modify it etc… It’s free for use and you don’t need to ask me permission.

Till next time, keep pushing pixels!

For more free stuff like this subscribe to our RSS and follow us on Facebook and Twitter.

Leave a Reply