Footer Fixed Pattern

This pattern attempts to solve the jumping around of the footer anchor pattern by fixing the position of the menu where space allows. In this demo you can see the fixed menu between 600px and 1024px.

When the browser is open less than 600px wide the demo will behave like the footer anchor pattern and when it's opened 1024px or wider it acts like either the footer anchor of footer variation patterns. In between the menu will remain fixed at the bottom of the browser.

The HTML

Here's the html for the navigation. It's identical to the html in the footer anchor and footer variation patterns.

<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>
			

The Default CSS

Here's the css that loads by default. It's identical to the default css in the footer anchor pattern.

.anchor {
  float: right;
  margin-top: 1.25em;
  display: block;
  padding: 0.25em 2%;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image: -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image: -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image: -o-linear-gradient(top, #6b6766, #5b5756);
}
	
.anchor:hover {
  background-color: #7b7776;
  background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
  background-image: -moz-linear-gradient(top, #8b8786, #7b7776);
  background-image: -ms-linear-gradient(top, #8b8786, #7b7776);
  background-image: -o-linear-gradient(top, #8b8786, #7b7776);
}

nav {
  background: #474342;
  overflow: hidden;
  border-top: 1px solid #878382;
}

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

@media screen and (min-width: 37.5em) {
  footer {
    margin-bottom: 4em;
  }
	
  .anchor {display: none;}

  nav {
    position: fixed;
    bottom: 0;
    z-index: 10;
    background: #474342;
    width: 100%;		
  }

  #demo-nav {
    padding: 0.5em 0;
  }
		
  #demo-nav li {
    border: 0;
    display: inline;
  }
		
  #demo-nav a {
    padding: 0.75em;
    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: 42.5em) {
  #demo-nav a {padding: 0.75em 1.25em;}
}

@media screen and (min-width: 48em) {
  #demo-nav a {
    padding: 0.75em 1.75em;
    float: left;
  }
}

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

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

  #demo-nav li {display: inline;}

  #demo-nav a {
    padding: 0.5em 1.0em;
    background-color: transparent;
    background-image: none;
  }
		
  #demo-nav a:hover {
    background: transparent;
    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;}
}

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

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

Tips

This pattern could be taken further by having the navigation be fixed at the bottom by default. I didn't do that in the demo because of the number of links.

Limiting the labels in the links to a few words or substituting icons for the text would make it easier to have the menu remain fixed by default.

While this pattern is currently not commonly used, it may become more so given the ease of use when holding a small device with one hand and navigating by thumb.