HTML
<nav class="dt w-100 border-box pa3 ph5-ns">
<a class="dtc v-mid mid-gray link dim w-25" href="#" title="Home">
<img src="http://tachyons.io/img/logo.jpg" class="dib w2 h2 br-100" alt="Site Name">
</a>
<div class="dtc v-mid w-75 tr">
<a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="About">Services</a>
<a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="Store">Blog</a>
<a class="link dim dark-gray f6 f5-ns dib" href="#" title="Contact">Join Us</a>
</div>
</nav>
css
.border-box {
box-sizing: border-box;
}
.br-100 {
border-radius: 100%;
}
.dib {
display: inline-block;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.h2 {
height: 2rem;
}
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link, .link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
.w2 {
width: 2rem;
}
.w-25 {
width: 25%;
}
.w-75 {
width: 75%;
}
.w-100 {
width: 100%;
}
.dark-gray {
color: #4d4d4f;
}
.mid-gray {
color: #555;
}
.pa3 {
padding: 1rem;
}
.mr3 {
margin-right: 1rem;
}
.tr {
text-align: right;
}
.f6 {
font-size: .875rem;
}
.v-mid {
vertical-align: middle;
}
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover, .dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8;
transition: opacity .15s ease-out;
}
@media screen and (min-width: 30em) {
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.mr4-ns {
margin-right: 2rem;
}
.f5-ns {
font-size: 1rem;
}
}