Dark Single Row Navigation

Dark Minimalistic navigation with logo, menu links, search and hamburger icon

Below you can find the dark version of single row navigation.

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></a>
<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>
<div class="nav-bottom">
<div class="search-container">
<form class="search-form" action="#" method="get">
<input class="search-input" name="site-search" type="text" placeholder="Search...">
</form>
</div>
<div class="mobile-links"></div>
</div>
</nav>
</div>
HTML
@charset "UTF-8";

* {
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-bars:before {
content: "\66";
}

/* Layout */

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

.container {
padding: 0 20px;
}

/* Navigation */

.main-nav {
background: #111;
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;
}

.main-nav a:hover {
color: #666;
}

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

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

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

.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: #ccc;
}

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

.search-container {
background: #111;
overflow:hidden;
padding: 0 30px;
display: none;
border-top: 1px solid #292929;
}

.search-input {
background: #222;
border-top: 1px solid #292929;
border-style:solid;
display: block;
height: 40px;
padding: 10px;
box-sizing: border-box;
margin: 20px 0;
width:100%;
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.search-input::input-placeholder {
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.search-input::-webkit-input-placeholder {
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.search-input::-moz-placeholder {
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.search-input:-ms-input-placeholder {
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.search-input:-moz-placeholder {
font-size: 15px;
font-family: Montserrat, sans-serif;
}

.user-login {
float: right;
font-size: 14px;
display:none;
padding: 27px 20px 23px;
border-left: 1px solid #292929;
height: 70px;
width: 70px;
box-sizing:border-box;
text-align:center;
}

.user-login .icon-user {
font-size: 20px;
}

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

.nav-links {
display: none;
}

.mobile-links .nav-links {
display: block;
}

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

.nav-links a:hover {
color: #ccc;
}

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

@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-links {
display: block;
float: right;
margin:14px 30px 0 0;
}

.nav-links a {
display: inline-block;
margin-right: 30px;
}
}
CSS
$(document).ready(function(){
var mobileNavTrigger = $(".mobile-nav"),
navTop = $(".nav-top"),
searchTrigger = $(".site-search-link"),
dropdownSearch = $(".search-container"),
navLinks = $(".nav-links"),
mobileLinks = $(".mobile-links"),
searchInput = $(".search-input");

//Mobile navigation toggle
mobileNavTrigger.click(function(e){
if($(window).width() < 768) {
e.preventDefault();
e.stopPropagation();
mobileLinks.slideToggle();
mobileNavTrigger.toggleClass("active");
}
});

//Changin position of the search form depending on the screen size
function elementPositioning() {
if($(window).width() >= 768 && !navLinks.parent().is(".nav-top")) {
navLinks.appendTo(navTop);
}

if($(window).width() < 768 && !navLinks.parent().is(".mobile-links")){
navLinks.appendTo(mobileLinks);
}
}

//Showing search
function showSearch() {
dropdownSearch.slideDown(function(){
searchInput.focus();
searchTrigger.addClass("active");
});
}

//Hiding search
function hideSearch() {
dropdownSearch.slideUp(function(){
searchInput.blur();
searchTrigger.removeClass("active");
});
}

//Toggle search box when clicking on search button
function toggleSearch() {
if(!searchTrigger.hasClass("active")) {
showSearch();
} else {
hideSearch();
}
}

searchTrigger.click(function(e){
e.preventDefault();
e.stopPropagation();
toggleSearch();
});

//Hiding search when clicking anywhere outside of the search box
$(document).click(function(){
hideSearch();

if(mobileNavTrigger.is(".active") && $(window).width() < 768){
mobileLinks.slideUp();
mobileNavTrigger.removeClass("active");
}
});

dropdownSearch.add(mobileLinks).click(function(e){
e.stopPropagation();
});

//Positioning all elements
elementPositioning();

$(window).resize(function(){
elementPositioning();
});
});
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0
Browser support:
           
8+