"Flipart Header"
Bootstrap 3.0.0 Snippet by pratyushranjan

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>header</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous"> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="container"> <div class="small_header"> <div class="small-search-bar"><input type="text" name="search" placeholder="Search for Products"></div> <div class="small-nav"><span class="small-nav-title">menu</span><span class="nav-icon"><i class="fa fa-bars" aria-hidden="true"></i></span></div> <div class="small-nav-div"> <ul class="small-nav-list"> <li>home</li> <li>add prescriptions</li> <li>shop</li> <li>checkout</li> <li>my account</li> <li>cart</li> <li>blog</li> <li>contact</li> </ul> </div> </div> <div class="header-container"> <div class="header-top"> <ul class="header-top-list"> <li>advertise</li> <li>track order</li> <li>sign up</li> <li>logIn</li> </ul> </div> <div class="search-bar-header"> <div class="header-logo"> <!-- <img src="logo.png"> --> <h3>Menu</h3> </div> <div class="form"> <form> <input type="text" placeholder="search for products"> <button class="search-button"><i class="fa fa-search" aria-hidden="true"></i></button> </form> </div> <div class="cart-btn"> <button class="cart-button">cart</button> </div> </div> <div class="header-content"> <ul class="header-content-list"> <li>home</li> <li>add prescriptions</li> <li>shop</li> <li>checkout</li> <li>my account</li> <li>cart</li> <li>blog</li> <li>contact</li> </ul> </div> </div> </div> </body> </html>
*{ list-style: none; color: #ffffff; margin: 0px; } .container{ display: block; width: 100%; height: auto; background-color: #2874F0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; text-transform: capitalize; } .header-container{ display: block;; width: 100%; position: relative; } .header-top{ display: block; width: 100%; height: auto; } .header-top-list{ position: relative; height: 35px; } .header-top-list li{ display: inline-block; float: right; margin-top: 5px; margin-right: 20px; } .search-bar-header{ display: block; width: 90%; margin-left: 5%; margin-right: 5%; height: auto; } .header-logo{ display: inline-block; width: 10%; float:left; height: auto; } .header-logo img{ position: relative; width: 100%; } .form{ display: inline-block; width: 78%; margin-left: 1%; height: auto; } .form form input[type='text']{ display: inline-block; width: 90%; box-shadow: 10px 10px 10px #2469d9; border: none; height: 40px; padding-left: 10px; } .cart-btn{ display: inline-block; width: 10%; height: auto; } .header-content{ display: block; width: 90%; margin-left: 5%; margin-right: 5%; clear: left; height: auto; } .header-content-list{ display: block; height: auto; width: 100%; } .header-content-list li{ display: inline-block; text-align: center; width: 11%; margin-bottom: 1%; margin-top: 1%; text-align: center; } .search-button{ background-color: yellow; border: none; height: 42px; width: 8%; color: #2469D9; margin-left: -4px; } .cart-button{ background-color: #2469D9; box-shadow: 10px 10px 10px #2469D9; border: 2px solid #2874F0; height: 42px; width: 100%; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #919394; text-transform: capitalize; } ::-moz-placeholder { /* Firefox 19+ */ color: #919394; text-transform: capitalize; } :-ms-input-placeholder { /* IE 10+ */ color: #919394; text-transform: capitalize; } :-moz-placeholder { /* Firefox 18- */ color: #919394; text-transform: capitalize; } /*small screen header styling*/ .small-nav-div { display: block; margin-top: -630px; transition-duration: 0.5s; transition-property: all; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); width: 100%; } .small-nav { background: #363636 none repeat scroll 0 0; display: block; width: 100%; height: 60px; position: relative; z-index: 1; } .smal-nav-div-down{ display: block; margin-top: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .small-nav-list > li { height: 25px; padding: 23px 3%; border: 1px solid transparent; text-transform: uppercase; font-size: 15px; width: 93%; } .small-nav-list > li:hover { border: 1px solid #ffffff; width: 93%; cursor: pointer; border-radius:25px; background-color: #719531; } .small_header { background-color: #363636; } .small-nav-list { padding-left: 0px; padding-bottom: 10px; } .nav-icon { background-color: #2986e2; border: 2px solid #2986e2; border-radius: 5px; float: right; height: auto; margin: 10px 20px; text-align: center; width: auto; } .nav-icon i { margin: 10px 12px; } .small-search-bar { background-color: #363636; display: block; padding-bottom: 10px; position: relative; z-index: 1; padding-top: 10px; width: 99%; } .small-search-bar > input { position: relative; width: 100%; border-radius: 25px; height: 40px; border: none; } .small-nav-title { display: inline-block; font-size: 24px; font-weight: 700; margin-left: 5%; margin-top: 15px; text-transform: uppercase; }
$(function(){ $(document).ready(function(){ if($(window).width() < 960){ $('.header-container').hide(); $('.small-nav').show(); $('.small_header').show(); $('.small-nav-div').show(); }else{ $('.header-container').show(); $('.small-nav').hide(); $('.small_header').hide(); $('.small-nav-div').hide(); } $(document).on('click','.small-nav',function(){ $('.small-nav-div').toggleClass('smal-nav-div-down'); }); }); $(window).resize(function(){ if($(window).width() < 960){ $('.header-container').hide(); $('.small-nav').show(); $('.small_header').show(); $('.small-nav-div').show(); }else{ $('.header-container').show(); $('.small-nav').hide(); $('.small_header').hide(); $('.small-nav-div').hide(); } }); });

Related: See More

Material Kit
Resize & Fixed Header (shrinking header)
Header Curtain Effect
Left Sideways Panel Header

Questions / Comments: