Adding a Sticky Footer Using CSS

A sticky footer, a critical part of your website navigation, sticks to the bottom of your browser window. This makes navigating your website easier and can be added with CSS.

A sticky footer, a critical part of your website navigation, "sticks" to the bottom of your browser window. This makes navigating your website easier and can be added with some CSS styles as shown below.

Below is the HTML, CSS, and JavaScript required to add a sticky footer to your website.

Step 1 - Add the HTML below to the page where you'd like your sticky footer

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <img src="https://www.solodev.com/assets/email/logo.png" alt="Logo Solodev"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content -->
<div class="container">
  <div class="page-header">
    <h1>Sticky Footer Example</h1>
  </div>
  <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
</div>
<footer class="footer">
  <div class="ct-footer-post">
    <div class="container">
      <div class="inner-left">
        <ul>
          <li>
            <a href="">FAQ</a>
          </li>
          <li>
            <a href="">News</a>
          </li>
          <li>
            <a href="">Contact Us</a>
          </li>
        </ul>
      </div>
      <div class="inner-right">
        <p>Copyright© 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>
        <p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
      </div>
    </div>
  </div>
</footer>

Step 2 - Add the CSS below to the main stylesheet of your website

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
code {
  font-size: 80%;
}
.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
  height: auto;
  margin: 0;
  padding: 0;
  margin-right: 20px;
}
.navbar {
  background-color: #000;
}
.navbar-default .navbar-nav > .active > a {
  padding: 8px 19px 9px !important;
}
.navbar-nav > li.active {
  padding: 8px 0 9px;
}
.navbar-right {
  padding-top: 0;
}
.navbar-default .navbar-nav > li > a::after {
  background-color: transparent;
  border-bottom: 3px solid #d2282e;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
  background-color: #0392CC;
}
.ct-footer {
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;
}
.ct-footer-post {
  background: #000;
  padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
  padding: 20px 0;
}
.ct-footer-post ul {
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;
}
.ct-footer-post ul li {
  display: inline-block;
  margin: 0 20px;
}
.ct-footer-post a,
.ct-footer-post p {
  color: #fff;
}
.ct-footer-post a:hover {
  text-decoration: underline;
}
@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p + p {
    padding-left: 50px;
  }
}
@media (min-width:992px) {
  .ct-footer-post .inner-left {
    float: left;
  }
  .ct-footer-post .inner-right {
    float: right;
  }
}
@media (max-width:991px) {
  .ct-footer-post {
    text-align: center;
  }
}

Step 3 - Add the includes below to the pages where your sticky footer lives

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It