CSS: creating mobile-friendly menus with Media Queries

In this brief tutorial I’ll show you how to turn an horizontal navigation menu into a vertical menu suitable for small screen devices using the CSS Media Queries.

We start with the following markup:

<nav id="navigation" role="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
</nav>

Now we define our styles for desktop and wide screens:

#navigation {
	height: 3em;
	background: #343434;
}

#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

#navigation li {
	float: left;
	height: 100%;
	margin: 0 1em;
}

#navigation a {
	float: left;
	height: 100%;
	line-height: 3;
	color: #fff;
	text-decoration: none;
	padding: 0 1em;
}

#navigation a:hover {
	background: #666;
}

Then we override these styles by targeting small screens:

@media only screen and (max-width: 320px) {
	#navigation,
	#navigation ul {
		height: auto;
	}
	#navigation li, #navigation a {
		float: none;
		display: block;
		margin: 0;
		height: auto;
	}
	
	#navigation a {
		width: auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 1em;
	}
}

You can see the final result in the following video.