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