Dark Bordered Responsive Header

Dark responsive header with login, search and social icons

Below you can find the dark version of bordered minimalistic responsive site header

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<nav class="main-nav">
<div class="nav-top">
<a href="#" class="mobile-nav"><i class="icon-bars"></i></a>
<a href="#" class="logo">header</a>
<div class="site-search">
<a class="site-search-link" href="#">
<i class="icon-search"></i>
</a>
</div>
<a href="#" class="user-login"><i class="icon-user"></i> Log in</a>
</div>
<div class="nav-bottom">
<div class="social-links">
<a href="#"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-instagram"></i></a>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Team</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
margin: 0;
padding: 0;
}

/* Icon Font */

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff") format("woff"),
url("fonts/sample-font.ttf") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;

}

[data-icon]:before {
font-family: "sample-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
vertical-align: middle;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "sample-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
content: "\61";
}

.icon-search:before {
content: "\62";
}

.icon-facebook:before {
content: "\63";
}

.icon-twitter:before {
content: "\64";
}

.icon-instagram:before {
content: "\65";
}

.icon-bars:before {
content: "\66";
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #222;
}

.container {
padding: 0 20px;
}

/* Navigation */

.main-nav {
background: #111111;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
margin: 20px auto 20px;
width: 100%;
max-width: 1200px;
}

.main-nav a {
text-decoration: none;
color: #ccc;
}

.nav-top:before, .nav-bottom:before, .nav-top:after, .nav-bottom:after { /* Clearfix */
display: table;
content: " ";
}

.nav-top:after, .nav-bottom:after { /* Clearfix */
clear: both;
}

.nav-top {
text-align: center;
}

.nav-bottom {
border-top: 1px solid #292929;
padding: 0 30px;
display:none;
}

.mobile-nav {
float: left;
border-right: 1px solid #292929;
display: block;
height: 70px;
width: 70px;
text-align: center;
}

.mobile-nav .icon-bars {
font-size: 21px;
margin-top: 26px;
display:inline-block;
color: #fff;
}

a.logo {
display: inline-block;
font-size: 32px;
color: #d35400;
font-weight: bold;
letter-spacing: -4.5px;
margin: 15px 0 0 0;
}

.site-search {
float: right;
border-left: 1px solid #292929;
}

.site-search .site-search-link {
display: block;
float: left;
height: 70px;
width: 70px;
text-align: center;
}

.site-search .icon-search {
font-size: 20px;
margin-top: 27px;
display:inline-block;
}

.user-login {
float: right;
margin: 26px 30px 0 0;
font-size: 14px;
display:none;
}

.user-login .icon-user {
margin-right: 5px;
font-size: 18px;
}

.nav-links a {
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
padding: 14px 0;
}

.nav-links a:last-child {
margin-right: 0;
}

.social-links {
background: #f1f1f1;
border-bottom: 1px solid #292929;
margin: 0 -30px;
text-align: right;
padding: 10px 30px;
}

.social-links a {
font-size: 20px;
margin-left: 14px;
}

@media (min-width: 768px) {
.container {
padding: 0 30px;
}

.main-nav {
margin: 30px auto 30px;
}

.mobile-nav {
display: none;
}

a.logo {
float: left;
margin: 15px 0 0 30px;
}

.user-login {
display: block;
}

.nav-bottom {
display: block;
}

.nav-links {
float: left;
}

.nav-links a {
display: inline-block;
margin-right: 30px;
}

.social-links {
background: none;
border-bottom: none;
float:right;
margin: 12px 0 0 0;
padding: 0;
}
}
CSS