Examining Responsive Navigation: Footer Patterns

Welcome to the second in a series which looks at responsive navigation patterns. This article will walk you through four patterns where navigation moves to the footer, conserving space at the top of the page.

So, to recap. In the previous tutorial we developed three patterns where the navigation remained in the header no matter what the screen size. The goal of those patterns was to minimize the vertical space when the navigation was viewed on smaller screens.

Today we'll flip things and develop four new patterns where the navigation resides in the footer of our design. By moving our menu to the bottom of the page we naturally save space at the top. As with the previous article these patterns are probably familiar to you through Brad Frost who compiled patterns being used on responsive sites as well as some complex patterns being used.

The Patterns

With the three header patterns our main concern was space, specifically vertical space and how not to use too much of it. You want visitors to see your content as soon as possible and they can't do that if the navigation is taking up the entire screen. One way we can solve this problem is to move the navigation to the footer.

That opens up another set of challenges. While visitors will more easily get to the content, they'll now have to scroll to the bottom of the page to discover the navigation.

The patterns we'll develop in this article are:

Footer only — keeps the menu in the footer at all times.
Footer only variation — keeps the menu in the footer on small screens, but moves it to the header once space allows.
Footer anchor — keeps the menu in the footer on small screens, but provides a link (button) to it at the top of the page.
Footer fixed — keeps the menu in the footer on small screens and introduces fixed positioning so it remains visible.

Each of these patterns will build on the pattern before it. First we'll move the navigation to the footer and then we'll add variations that help make it more visible and easier to access.

As with the previous article on the header patterns I'll keep the code below specific to the menu and associated elements. The full code is available through the download link above and can also be seen by visiting the demo and viewing the source code.

Footer Only Pattern

As the name implies the footer only pattern moves the global navigation to the footer. In all honestly you probably won't use this pattern as is. While it does free up vertical space at the top of the page, it hides the navigation at the bottom. That might work fine on smartphone screens, but it doesn't make a lot of sense on a widescreen browser.

However, this pattern does set up the foundation for the other patterns, which will build on this one and help make the menu more accessible.

Approach: On the smallest screens we'll set up the menu to display at the bottom of the page as a vertical list of links. Then we'll style them to make them a little more attractive. Through media queries we'll transition the menu from vertical to horizontal, though at all times the menu will remain at the bottom of the page.

Step 1: The HTML

Since we're moving our navigation code lets take a quick look at the overall structure of the page for some context. Previously the navigation was located inside the header element with the logo. Now it's located inside the footer with the credit.

Otherwise it's the same list of links we saw in part one. All I did was copy and paste the exact code in the demo to move it from top to bottom.

<body>
  <header>
	<!-- navigation used to be located here -->
  </header>

  <div class="container">
    <div id="content"></div>
    <div id="sidebar"></div>
  </div>

  <div class="subfooter"></div>

  <footer>
    <nav>
      <ul id="demo-nav">
        <li><a href="">Back to Post</a></li>
        <li><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 class="current"><a href="footer-fixed.html">Footer Fixed</a></li>
      </ul>
    </nav>

    <div class="container"></div>
  </footer>

</body>

Step 2: The Default CSS

By default a list displays its items as block level elements, one of top of another. This is what we want so we're off to an easy start. The default styles are mainly aesthetic. First we'll set the margin and padding of the list to 0 and remove the bullets. Next we'll give the list items a top border and set the current link as a different color.

#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;}

Similarly, the rest of the links get a color and some padding. The underline is removed and the links have been set to display as block level elements in order to increase the clickable area of the link. The more area you can touch to activate the link the better for small screens and fat fingers.Perhaps most interesting is the background. To add some visual interest I decided to give the links a gradient and make the background a little lighter on hover.

#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;
}

Again this all purely aesthetic. By default the menu displayed a vertical list of links, which is all we really needed.

Step 3: The Media Queries

The vertical list of links we styled above works fine until the browser width reaches about 42.5em (680px). At this point the horizontal space feels a little too empty. We'll transition the menu to a horizontal one still at the bottom of the page.

The transition is made by floating the links inside the list to the left. Everything else is to redo the aesthetics. First I gave the list a background color that would work between the sub footer links and the credit. I also gave it some padding and a bottom border. Since the links inside are now being floated I added overflow: hidden to the list to force it to stay open.

The links then get some padding. The 5% on the left is the same padding everything else along the left edge has set. I removed the border as the links are no longer on top of one another and also removed the background color behind them. Because I'd previously used a gradient on the background, I also needed to clear out the background-image property on the links, including their hover state.

@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;			
  }
}

The next media query is simply to give the links a little more space as the browser gets wider.

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

We could leave things just like that and continue to add more space between links as needed. Instead I decided to drop the links down and to the right of the credit once there was enough space.

First I set the list to float to the right, which mostly drops it into place. After some adjustment to the link padding it's completely in place. We also need to remove the background of the entire menu, since we want the footer color to be the background.

@media screen and (min-width: 64em) {
  #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;}
}

The last media query is once again to adjust the spacing between the links. We'll stop here, though you can continue to add more media queries to increase the space.

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

Tips

There really isn't a lot to this pattern once you move the html for the navigation to the bottom of the page. The majority of the css above is aesthetic styling and you're free to style your menu however you like. At some point you'll probably want to transition it from a vertical menu to a horizontal one.

What's nice about the footer pattern is it can work no matter how many links your navigation contains. On the smallest screens you can use as much vertical space as you'd like and once there's room you can fit those links horizontally next to each other. The key is to make sure the links have enough space around them so they can be independently touched without hitting another link.

Again, you probably won't use this pattern as is and will instead choose to use one of the following variations of this pattern that help make the menu more visible and accessible.

Examples

The sites below are all using the footer only pattern

The Footer Variation Pattern

This second pattern is a variation of the footer only. Up to 64em (1024px) it's almost exactly the same in the code and will look exactly the same when viewing the page. However, instead of moving the navigation to the right side of the footer once space allows, we move it to the right side of the header as you can see in the image above.

On small screens people will still need to scroll to find the menu, but now it will be at the top of the page where most people expect to see it on wider screens. Since, most of the code is identical, I'll only cover where the patterns differ below.

Approach: We'll do the same thing as above on small screens. We'll start with a vertical menu and once space allows we'll transition the menu to display horizontally. We'll differ once the screen grows wide enough. Instead of floating the menu to the right side of the footer, we'll move it up to the right side of the header.

Step 1: The HTML

The only difference in the html between this and the footer only pattern is the navigation has been removed from the inside of the footer and now sits just above it. This won't affect it's display on small screens, but it made it a little easier to move the navigation to the header.

<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 &mdash;
    <a href="http://www.vanseodesign.com">Vanseo Design</a></p>
  </div>
</footer>

Step 2: The Default CSS

The only change in the default css is below. Since I moved the menu outside of the footer, it needed the slightest bit of styling to add a border to the top.

1	nav {
2	border-top: 1px solid #878382;
3	}

Step 3: The Media Queries

The first couple of media queries (at 42.5em and 56em are identical to what we saw in the footer only pattern above. The difference comes when we reach 64em. Above I moved the menu to the right side of the footer. Here we'll move it to the right side of the header.

Much of what's below is similar to we did above. The main thing to note is the positioning on the nav element containing our menu. We can't float it this time as it's at the bottom of the html structure. Instead we'll reach for positioning.

While I haven't mentioned it previously the body element is set to position: relative. With that we can set the nav to be positioned absolutely and set it's top and right values.

Everything else is either the same or a tweak of what we saw above. Paddings are a little different and we still need to remove the background and border on the menu.

@media screen and (min-width: 64em) {
  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;}	
}

Once the navigation is moved to the top of the page, the rest of the media queries exist to bump up the padding between links. Here I stopped at 90em, but again you cab continue as wide as you want.

@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 has the same advantages of the footer only pattern above. It can work with as many links as you want. Even better it moves the navigation to the top of the page once there's enough space. When that is will depend on the specifics of your design. The key once again is making sure the targets for the links are large enough for fingers.

Of course this pattern also has the same downside as the footer only pattern on smaller screens where people will still need to scroll to find your navigation.

Examples

Pears
Evening Edition
Kisko Labs
Dustin Senos' Portfolio — The menu of external links on the left follows this pattern

The Footer Anchor

The footer anchor pattern attempts to solve the problem of having to scroll to get to the menu by including an anchor link at the top of the page directly to the menu. Aside from this addition, this pattern will be identical to the footer variation pattern we just built.

Approach: On small screens we'll start with the same vertical menu we've been working with so far. We'll include a css button that when clicked will take us directly to the navigation in the footer. Once the screen is wide enough and we move the navigation back to the top of the page, we'll hide the anchor button.

Step 1: The HTML

The html is identical to the footer variation above with one exception. We need to add a link at the top of the page, which we'll style as a button. We'll make use of the already existing #demo-nav id to serve as the anchor for the link. When clicked it will reload the page and add a #demo-nav hash to the end of the url taking you right to the navigation.

<header>
  <img class="logo" src="images/logo.png" width="252" height="46" />
  <a class="anchor" href="#demo-nav">Menu</a>
</header>

<!-- lots of code -->

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

Step 2: The Default CSS

The only difference in the default css is that we need to style the link to look more like a button and position it to the right side of the header. Floating the link to the right and giving it some margin takes care of the position.

To make it buttony, we first set the link to display as a block level element and add some padding. After removing the underline and changing the color to white, we add a small border radius and then some background.

Once again we'll use a gradient on the background to make the button look more clickable. For the one or two browsers that can't handle it, no big deal, but for those that can it'll add a bit of depth to the button. For the hover state we'll make the colors a little lighter.

.anchor {
  float: right;
  margin-top: 1.25em;
  display: block;
  padding: 0.25em 2%;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  background: #5b5756;
  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);
}

Step 3: The Media Queries

There's only one new thing to see in the media queries. At 64em (where we moved the navigation to the top of the page) we need to hide the button and so we set its display to none. Everything else is exactly the same as in the footer variation pattern.

1	@media screen and (min-width: 64em) {
2	.anchor {display: none;}
3	}

Tips

This pattern has all the advantages of the ones above. It keeps vertical space at the top of the page to a minimum. As with the other patterns you want to make sure the link targets are large enough. The anchor makes the navigation more accessible whenever it's in the footer.

The downside is the jump from the top to bottom of the page. It could potentially confuse visitors who may not realize they jumped to the bottom. One way to provide a clue is to add a "back to top" link. I haven't added one here, but it would both help orient the reader and provide quick access to the top of the page.

Another way to overcome this problem is our next pattern.

Examples

Contents Magazine
Webdesigntuts+ Demo
Bureau — Note the 'i' in the top right
Mobilism 2011

The Footer Fixed Pattern

Where the footer anchor attempts to solve the scrolling problem by taking you to the menu, this pattern keeps the navigation visible so no jump is required. It uses fixed positioning to keep the navigation at the bottom of the browser. Navigation at the bottom of the page is highly usable on very small screens and while this pattern isn't currently used a lot, it's starting to be used more.

Approach: Because of the number of links we have, we'll make use of the footer anchor pattern on the smallest screens. As soon as room allows, we'll removed the anchor button and transition the menu so it's both horizontal and fixed in place at the bottom of the browser. We'll keep it there until there's enough room to move it to the top of the page.

Step 1: The HTML

The html is identical to what we saw with the footer anchor pattern above. Seriously, there's absolutely nothing to see here. Move along.

Step 2: The Default CSS

Yep. Identical here too. Once again nothing to see. Move along please.

Step 3: The Media Queries

Finally some new code. Once the browser is open to 37.5em (600px) there's enough room to position the menu horizontally. First we add some margin to the bottom of the footer or it would remain behind the positioned menu. Since the menu is visible we no longer need the anchor button and we'll turn it's display off.

To fix the navigation we'll style the nav element. We set it's position to fixed and give it a bottom value of 0. The z-index prevents the credit from showing through when it's behind the menu. Any positive value will work. 10 was arbitrary. We'll also give the nav element a background and we have to set the width to 100% as the navigation isn't the full width of the page by default.

@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;			
  }
}

Everything else is the same as it was above. Inside the nav element the links are floated left and have paddings set. We should remove the background color and gradient too, just like we did above. I guess we're done here. Move along.

Tips

Once again this pattern uses minimal vertical space at the top of the page. It solves both the problem of hidden navigation and a jump to the navigation by keeping the navigation visible at all times. Or it almost did.

In the demo there were too many links to carry the fixed positioning down below 600px so I left the footer anchor pattern in place at those sizes. Better would have been to reduce the navigation labels to 4 or 5 words or even take it one step further and use icons.

This pattern isn't that common at the moment. You can see I only found 2 examples to show you. Given how most of us use our thumbs to navigate when holding mobile devices with one hand, I suspect we'll see more of this pattern and variations of it in the future.

Examples

Summary

All four of the patterns here are variations on a theme. Instead of using the valuable and scarce vertical real estate at the top of the page the patterns move the navigation to the bottom of the page. The main advantage is it allows people on the smallest screens to see and get to your content quickly. The downside is the navigation is all the way down at the bottom of the page.

The first variation of the pattern moved the navigation back to the top once space allowed. That helps, but it's still hunting and scrolling for the menu on small screens. The footer anchor corrects that by using a small amount of space in the header to provide a direct link and quick access to the menu. It leaves us with a quick and potentially disorienting jump down the page, though.

The footer fixed pattern corrects that by keeping the menu visible at the bottom of the page. With few navigation labels or the use of icons the menu can always be visible regardless of how wide the browser.

We still have more patterns to get to. Next time we'll move back to the top of the page. We'll adapt what we did with the footer anchor so instead of jumping us to the navigation we'll reveal the navigation in place.