Footer Only (Variation) Pattern

This is a variation of the footer only pattern. In the original pattern once the browser was open wide enough I moved the menu to the right of the credit. In this variation I instead moved it into the header to the right of the logo.

Since the downside of the footer pattern is making the visitor scroll to the bottom, we might as well move the menu to the top of the page once there's room for it.

The HTML

Here's the html to create both the navigation and the footer. I moved the navigation out of the footer to make it easier to move around.

<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>
 
<footer>
  <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. It's identical to the original footer pattern with the exception of needing to style the nav element as it's no longer inside the footer.

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

Here's the css that loads in the media queries.

@media screen and (min-width: 42.5em) {
  #demo-nav {
    padding: 1.5em 0;
    background: #474342;
    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;
  }
	
  nav {
    position: absolute;
    top: 0;
    right: 5%;
    background: none;
    border: 0;
  }
	
  #demo-nav {
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {
    display: inline;
  }
		
  #demo-nav a {
    padding: 0.5em 1em;
  }
		
  #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;}
}

@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

As with the original variation this pattern can work regardless of how many links you have in your menu. It has the same "fat finger" problem on small screens and one key is to transition from vertical to horizontal once space allows.

The variation is to move the navigation to the top of the page assume room allows. Where and how to do this depends on the specifics of your design.