Single row navigation

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

The site header is one of the key elements on a website. It is hard to overstate the importance of this element, because it makes the first impression and guides the user throughout the website.

In this article, you can find an example of a responsive single row header that includes the site logo, site links, user login link and sliding search panel. This header adapts to any screen size, and navigation links transform from inline display on large screens to a sliding down “hamburger” panel on mobile screens.

How it was made

The header changes its view when the screen size is less than or equal to 768 pixels. The “hamburger” icon gets visible, and when the user clicks on it, navigation slides up and down with the jQuery slideToggle() method. This view is made to fit mobile devices.

Showing and hiding the search bar

The search button expands and collapses the search panel by triggering two functions - showSearch() and hideSearch(). The first function slides the search panel down with the jQuery slideDown() method, while the second function slides it up with the jQuery slideUp() method. When the search input is shown, it becomes focused with the jQuery focus() method.

Positioning elements in the DOM with jQuery

In this example, navigation link placement in the DOM is controlled by the Javascript function elementPositioning(). This function checks the browser window size of your device and changes the position of the navigation links whenever you load the page or resize the browser window.

Check the sandbox below for the real-life example.

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

.container {
padding: 0 20px;
}

/* Navigation */

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

.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 #ddd;
display: block;
height: 70px;
width: 70px;
text-align: center;
}

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

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

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

.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: #fff;
overflow:hidden;
padding: 0 30px;
display: none;
border-top: 1px solid #ddd;
}

.search-input {
border: 1px solid #ddd;
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 #ddd;
height: 70px;
width: 70px;
box-sizing:border-box;
text-align:center;
}

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

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

.nav-links {
display: none;
}

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

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

.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+