Footer Only Pattern

The footer only pattern is the same as the top-nav pattern, except the navigation is located in the footer instead of the header. The obvious downside is your navigation isn't visible until visitors scroll to the bottom of the page.

This might not be a problem on something like a smartphone, where you probably want visitors to see the content as soon as possible and begin engaging with it. Recent thought on smartphone navigation also suggests links in the footer might be preferable, since they're within reach.

The HTML

Here's the html used to create the footer for this page.

<footer>
  <nav>
    <ul id="demo-nav">
      <li><a href="">Back to Post</a></li>
      <li class="current"><a href="footer-only.html">Footer Only</a></li>
      <li><a href="footer-adapt.html">Footer Variation</a></li>
      <li><a href="footer-anchor.html">Footer Anchor</a></li>
      <li><a href="footer-fixed.html">Footer Fixed</a></li>
    </ul>
  </nav>
 
  <div class="container">
    <p class="credit">Demo by Steven Bradley —
    <a href="http://www.vanseodesign.com">Vanseo Design</a></p>
  </div>
</footer>

The Default CSS

Here's the css that loads by default.

footer {
  clear:both;
  background: #373332;
  color: #a7a3a2;
  width: 100%;
  border-top: 1px solid #878382;
  padding-bottom: 1em;
 }
	
.credit {
  font-size: 0.875em;
  float: left;
  padding: 0.5em 0;
}
		
.credit a {
  color: #578b9c;
  font-style: italic;
}
	
.credit a:hover {color: #97cbdc;}


#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
	
#demo-nav li {
  border: solid #878382;
  border-width: 0 0 1px 0;
}
	
#demo-nav li.current a {color: #9b9796;}
#demo-nav li.current a:hover {color: #111;}

#demo-nav a {
  color:#fff;
  padding: 0.75em 5%;
  text-decoration: none;
  display: block;
  background-color: #575352;
  background-image: -webkit-linear-gradient(top, #777372, #676362);
  background-image: -moz-linear-gradient(top, #777372, #676362);
  background-image: -ms-linear-gradient(top, #777372, #676362);
  background-image: -o-linear-gradient(top, #777372, #676362);
}
	
#demo-nav a:hover {
  background-color: #777372;
  background-image: -webkit-linear-gradient(top, #878382, #777372);
  background-image: -moz-linear-gradient(top, #878382, #777372);
  background-image: -ms-linear-gradient(top, #878382, #777372);
  background-image: -o-linear-gradient(top, #878382, #777372);
  color: #111;
}

The CSS in Media Queries

Here's the css included in the media queries.

@media screen and (min-width: 42.5em) {
  #demo-nav {
    background: #474342;
    padding: 1.5em 0;
    border-bottom: 1px solid #878382;
    overflow: hidden;
  }
		
  #demo-nav li {border: 0;}
		
  #demo-nav a {
    padding: 0.75em 0 0.75em 5%;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }
		
  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;			
  }
}

@media screen and (min-width: 56em) {
  #demo-nav a {padding: 0.75em 1.5em 0.75em 5%;}
}

@media screen and (min-width: 64em) {
  footer .credit {
    padding: 0.75em 0;
  }
	
  #demo-nav {
    float: right;
    margin-right: 5%;
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {display: inline;}
		
  #demo-nav a {
    padding: 0.5em 1.25em;
  }
		
  #demo-nav a:hover {
    color: #777
  }
		
  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;}
}

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 0.5em 1.75em;}
}

Tips

This pattern can work no matter how many links you have in your menu. Since we've moved the menu to the bottom of the page vertical space is no longer an issue. We do still need to deal with the "fat finger" issue, so you'll want to make sure links are set to display as block level elements and to provide enough padding around them.

The key transition with this pattern is to change the menu from displaying vertically to displaying horizontally. At some point the browser will be open wide enough where a horizontal menu makes more sense than a vertical menu. Where this point is and how to make the transition depends on your navigation and design in general.