<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<body>
		<div class="nav">
				<ul>
						<li><a class="features" href="#0"><span>description</span></a></li>
						<li><a class="size" href="#0"><span>size chart</span></a></li>
						<li><a class="reviews" href="#0"><span>reviews (6)</span></a></li>
						<li><a class="shipping" href="#0"><span>shipping &amp; returns</span></a></li>
						<li><a class="qa" href="#0"><span>q &amp; a</span></a></li>
				</ul>
		</div>

		<div class="nav-alt">
				<ul>
						<li><a class="features" href="#0"><span>features</span></a></li>
						<li><a class="size" href="#0"><span>size chart</span></a></li>
						<li><a class="reviews" href="#0"><span>reviews (6)</span></a></li>
						<li><a class="shipping" href="#0"><span>shipping &amp; returns</span></a></li>
						<li><a class="qa" href="#0"><span>q &amp; a</span></a></li>
				</ul>
		</div>

		<div class="nav-alt2">
				<ul>
						<li><a class="features" href="#0"><span>features</span></a></li>
						<li><a class="size" href="#0"><span>size chart</span></a></li>
						<li><a class="reviews" href="#0"><span>reviews (6)</span></a></li>
						<li><a class="shipping" href="#0"><span>shipping &amp; returns</span></a></li>
						<li><a class="qa" href="#0"><span>q &amp; a</span></a></li>
				</ul>
		</div>
</body>
* {
		padding: 0;
		margin: 0;
}

*,
*:after,
*:before {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
}

body {
		background: #eae6e1;
		padding: 40px;
		font-family: helvetica, arial, sans-serif;
		font-size: 16px;
		letter-spacing: .05em;
		font-weight: 300;
}

.nav,
.nav-alt {
		margin-bottom: 30px;
		width: 100%;
}

.nav ul,
.nav-alt ul,
.nav-alt2 ul {
		list-style: none;
		text-align: center;
		height: 80px;
}

.nav li,
.nav-alt li,
.nav-alt2 li {
		display: inline-block;
		text-transform: uppercase;
		margin-left: -4px;
		height: 80px;
		line-height: 80px;
		overflow: hidden;
}

.nav a,
.nav-alt a,
.nav-alt2 a {
		display: block;
		text-decoration: none;
		transition: all .3s ease 0s;
		-webkit-transition: all .3s ease 0s;
		padding: 0 40px;
}

.nav a:hover,
.nav a:active {
		-webkit-box-shadow: inset 0 6px 0 0 #309ae4;
		box-shadow: inset 0 6px 0 0 #309ae4;
}

.nav-alt a:hover,
.nav-alt a:active,
.nav-alt2 a:hover,
.nav-alt2 a:active {
		-webkit-box-shadow: inset 0 6px 0 0 #fff;
		box-shadow: inset 0 6px 0 0 #fff;
}

.features:before,
.size:before,
.reviews:before,
.shipping:before,
.qa:before {
		font-family: FontAwesome;
		display: inline-block;
		padding: 0 0.8em 0.1em 0;
		vertical-align: middle;
		text-transform: none;
		font-weight: normal;
		font-variant: normal;
		font-size: 1.5em;
		line-height: 1;
		speak: none;
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}

.features:before {
		content: "\f0ca";
}

.size:before {
		content: "\f0ce";
}

.reviews:before {
		content: "\f0e5  ";
}

.shipping:before {
		content: "\f0d1 ";
}

.qa:before {
		content: "\f0eb";
}
/*--- Nav Colours ---*/

.nav {
		background: #fff;
		border-top: 2px solid #309ae4;
}

.nav a {
		color: #152034;
}

.nav a:hover,
.nav a:active {
		color: #309ae4;
}
/*--- Nav-Alt Colours ---*/

.nav-alt {
		background: #309ae4;
}

.nav-alt a {
		color: #fff;
}

.nav-alt a:hover,
.nav-alt a:active {
		color: #fff;
}
/*--- Nav-Alt Colours ---*/

.nav-alt2 {
		background: #0a4fa1;
}

.nav-alt2 a {
		color: #fff;
}

.nav-alt2 a:hover,
.nav-alt2 a:active {
		color: #fff;
}

@media (max-width: 1200px) {
		.nav li span, .nav-alt li span, .nav-alt2 li span {
				display: none;
		}
		.features:before,
		.size:before,
		.reviews:before,
		.shipping:before,
		.qa:before {
				font-size: 2em;
				margin: 0;
				padding-right: 0;
		}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js