Adventures in Responsive Navigation

Do Nothing Approach

Nothing special going on here. When we get down to a certain breakpoint, the navigation is centered and more padding is added to each link.

The idea behind adding more padding to each link is to accommodate for touch devices - because you use your fingers! And fingers require a bigger "tap" area than a mouse's cursor does.

Apple recommends 44 x 44 points as the comfortable minimum tappable area on a touch device. Note that by points they mean pixels, unless referring to retina screens, which in that case 1 point would be 2 pixels.

The CSS:

Notice there is more padding on the .nav ul li a while we're less than 640px. That's it. Simple.


.nav { text-align: center; }
.nav ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; }
.nav ul li { display: inline-block; }
.nav ul li a { display: block; text-decoration: none; color: #444; transition: 0.4s ease background; padding: 15px 20px; border-radius: 2px; background-color: #f4f4f4; }
.nav ul li a:hover { background-color: #ccc; }
	
@media all and (min-width:640px){

	.nav { float: right; padding: 10px 0 0 0; }
	.nav ul li a { padding: 5px 10px; }

}

Interested in Web Developement and Fitness? I am. That's why I started The Strong Web. A podcast where I interview some of the brightest minds in both web developement and fitness. Find it on iTunes or your favorite place to listen to podcasts.