The Footer List

Placing your navigation menu at the bottom of your site forces your visitors to first look at your site before deciding where to go next.

I believe this to be one of the best ways to deal with navigation in responsive design. If your desktop navigation sits up top, then when you get to a certain breakpoint in your design, the menu becomes just one button (a pattern that we see all the time in responsive navigation) and this button is linked to the id of the mobile navigation that sits at the bottom of your page. It's basically an anchor to that place on your page.

On the desktop version, the mobile navigation at the bottom of your page is hidden. Once you hit the magical breakpoint, it appears and the menu up top is hidden.

This is such a simple method, but it seems to be pretty effective. The advantages to this are the simplicity in code. It requires no JavaScript to work. Where it might pose the biggest problem, however is the fact that you must maintain two menus. If you are using a CMS and can dynamically generate each menu, then you've got it made. Otherwise, you are burdened with the chore of maintaining two menus. Also, this method requires less work if your navigation doesn't have any sub-nav (drop-downs).

The CSS:

Remember, this is built mobile first using min-width (instead of max-width media queries). We've got two menus being loaded. One in the header, one in the footer. Simple, right?


.nav ul { display: none; list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
.nav ul li { display: inline-block; text-align: left; }
.nav ul li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
.nav ul li a:hover { background-color: #ccc; }

.anchor-link { display: inline-block; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }

.example-footer { font-size: 1.1em; }
#mobile-nav { display: block; }
#mobile-nav ul { list-style: none; margin: 0px; padding: 0px; }
#mobile-nav ul li { list-style: none; text-align: center; }
#mobile-nav ul li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
#mobile-nav ul li a:hover { background-color: #ccc; color: #fff; }

@media all and (min-width:48em){
	
	.nav ul { display: block; }
	.anchor-link { display: none; }
	#mobile-nav { display: none; }
	
}