Bordered minimalistic responsive header

Responsive header with login, search and social icons

The site header is one of the most important elements on a website. Unlike other elements, it usually appears on every page and is an element that forms part of the first impression of the website. In this article, you can find an example of a responsive header that includes the site logo, user login link, search bar, social links and navigation links. This header responds to screen size and hides navigation links under a “hamburger” navigation menu icon on mobile devices.

How it was made

The header was created to be fluid, and it switches to mobile view when the screen size is less than or equal to 768 pixels. With the help of CSS media queries, a “hamburger” icon is shown on mobile screens. When the user clicks on the icon, mobile navigation slides down and up with the jQuery slideToggle() method.

Showing and hiding the search bar

The magnifying glass icon makes the search bar slide up and down on mobile screens and from right to left on larger screens. This is achieved by two functions - showSearch() and hideSearch(). The first function animates the width of the search bar from 0px to 320px with the jQuery animate() method if the screen width is larger than or equal to 768px. The function slides the search bar down with the jQuery slideDown() method if the screen size is less than 768px. The second function animates the width of the search bar from 320px to 0 px if the screen width is larger than or equal to 768px. It slides the search bar up if the screen size is less than 768px. When the search bar is shown, the search input gets focus with the jQuery focus() method.

Positioning elements in the DOM with jQuery

In this particular header example, search bar placement in the HTML structure is defined by the javascript function elementPositioning(). This function checks the browser window size of your device and changes the search bar position whenever you load the page or resize the browser window.

Changing element position during the window resize may cause problems with the search input focus. When you focus the input on mobile devices, it opens the virtual keyboard which triggers the jQuery window resize() method and changes the position of the element to the same position where it is now. To avoid this, the function elementPositioning() also checks where the element is positioned during the window resize and does not allow it to be repositioned if its position is correct.

Hiding the search bar when clicking anywhere else on the site

In this example, you can collapse the search bar by clicking or tapping anywhere else on the page. Whenever you click on the document, the hideSearch() function is called. To avoid the search bar closing when you click on the search bar itself or elements inside of it, the jQuery event stopPropagation() method was used.

Keeping the search bar expanded when resizing the screen

Since mobile screens and larger screens use different approaches for displaying the search bar, it is important to switch between them when resizing the screen. This is achieved by the javascript function searchBoxStayActive(). Depending on screen width, it adds or removes necessary classes and inline CSS added by javascript. 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 class="search-container">

</div>
</div>
<a href="#" class="user-login"><i class="icon-user"></i> Log in</a>
</div>
<div class="mobile-search">
<div class="mobile-search-inner">
<form class="search-form" action="#" method="get">
<input class="search-input" name="site-search" type="text" placeholder="Search...">
</form>
</div>
</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: #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;
}

.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 #ddd;
padding: 0 30px;
display:none;
}

.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;
display: block;
width: 100%;
}

.search-input {
border: 1px solid #ddd;
display: block;
height: 40px;
padding: 10px;
box-sizing: border-box;
margin: 0;
width:100%;
}

.mobile-search {
display: none;
}

.mobile-search-inner {
border-top: 1px solid #ddd;
padding: 20px 30px;
}

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

.mobile-search {
display: none;
}

.search-container {
float: right;
width: 0;
overflow: hidden;
}

.search-input {
margin: 15px 20px 15px 0;
width: 300px;
}

.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
$(document).ready(function(){
var mobileNavTrigger = $(".mobile-nav"),
dropdownNav = $(".nav-bottom"),
searchTrigger = $(".site-search-link"),
slidingSearch = $(".search-container"),
dropdownSearch = $(".mobile-search"),
dropdownSearchInner = $(".mobile-search-inner"),
searchForm = $(".search-form"),
searchInput = $(".search-input");

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

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

if($(window).width() < 768 && !searchForm.parent().is(".mobile-search-inner")) {
searchForm.appendTo(dropdownSearchInner);
}
}

//Showing search
function showSearch() {
if($(window).width() >= 768) {
slidingSearch.animate({width: 320}, function(){
searchInput.focus();
searchTrigger.addClass("active");
});
} else {
dropdownSearch.slideDown(function(){
searchInput.focus();
searchTrigger.addClass("active");
});
}
}

//Hiding search
function hideSearch() {
if($(window).width() >= 768) {
slidingSearch.animate({width: 0}, function(){
searchInput.blur();
searchTrigger.removeClass("active");
});
} else {
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();
});

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

//Showing search box in the right place in case of window resize
function searchBoxStayActive () {
if($(window).width() >= 768 && searchTrigger.is(".active")) {
dropdownSearch.removeAttr("style");
slidingSearch.css({width: 320});
searchInput.focus();
}

if ($(window).width() < 768 && searchTrigger.is(".active")) {
slidingSearch.removeAttr("style");
dropdownSearch.show();
searchInput.focus();
}

if($(window).width() >= 768) {
dropdownNav.removeAttr("style");
}

if($(window).width() < 768 && mobileNavTrigger.is(".active")) {
dropdownNav.show();
}
}

//Positioning all elements
elementPositioning();

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