"header for anbiz"
Bootstrap 3.0.0 Snippet by adrnzhrf

<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 ----------> <nav class="[ navbar navbar-fixed-top ][ navbar-bootsnipp animate ]" role="navigation"> <div class="[ container ]"> <!-- Brand and toggle get grouped for better mobile display --> <div class="[ navbar-header ]"> <button type="button" class="[ navbar-toggle ]" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="[ sr-only ]">Toggle navigation</span> <span class="[ icon-bar ]"></span> <span class="[ icon-bar ]"></span> <span class="[ icon-bar ]"></span> </button> <div class="[ animbrand ]"> <a class="[ navbar-brand ][ animate ]" href="#">Bootsnipp</a> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="[ collapse navbar-collapse ]" id="bs-example-navbar-collapse-1"> <ul class="[ nav navbar-nav navbar-right ]"> <li class="[ visible-xs ]"> <form action="http://bootsnipp.com/search" method="GET" role="search"> <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets"> <span class="[ input-group-btn ]"> <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span> </div> </form> </li> <li><a href="#" class="[ animate ]">About</a></li> <li> <a href="#" class="[ dropdown-toggle ][ animate ]" data-toggle="dropdown">Resources <span class="[ caret ]"></span></a> <ul class="[ dropdown-menu ]" role="menu"> <li><a href="#" class="[ animate ]">Blog <span class="[ pull-right glyphicon glyphicon-pencil ]"></span></a></li> <li><a href="#" class="[ animate ]">List of resources <span class="[ pull-right glyphicon glyphicon-align-justify ]"></span></a></li> <li><a href="#" class="[ animate ]">Download Bootstrap <span class="[ pull-right glyphicon glyphicon-cloud-download ]"></span></a></li> <li class="[ dropdown-header ]">Bootstrap Templates</li> <li><a href="#" class="[ animate ]">Browse Templates <span class="[ pull-right glyphicon glyphicon-shopping-cart ]"></span></a></li> <li class="[ dropdown-header ]">Builders</li> <li><a href="#" class="[ animate ]">Form Builder <span class="[ pull-right glyphicon glyphicon-tasks ]"></span></a></li> <li><a href="#" class="[ animate ]">Button Builder <span class="[ pull-right glyphicon glyphicon-edit ]"></span></a></li> </ul> </li> <li class="[ dropdown ]"> <a href="#" class="[ dropdown-toggle ][ animate ]" data-toggle="dropdown">Snippets <span class="[ caret ]"></span></a> <ul class="[ dropdown-menu ]" role="menu"> <li><a href="#" class="[ animate ]">Featured <span class="[ pull-right glyphicon glyphicon-star ]"></span></a></li> <li><a href="#" class="[ animate ]">Tags <span class="[ pull-right glyphicon glyphicon-tags ]"></span></a></li> <li class="[ dropdown-header ]">By Bootstrap Version</li> <li><a href="#" class="[ animate ]">3.2.0</a></li> <li><a href="#" class="[ animate ]">3.1.0</a></li> <li><a href="#" class="[ animate ]">3.0.3</a></li> <li><a href="#" class="[ animate ]">3.0.1</a></li> <li><a href="#" class="[ animate ]">3.0.0</a></li> <li><a href="#" class="[ animate ]">2.3.2</a></li> </ul> </li> <li><a class="animate" href="#register">Register</a></li> <li><a class="animate" href="#login">Login</a></li> </ul> <li> <form action="" autocomplete="on"> <input id="search" name="search" type="text" placeholder="Search"><input id="search_submit" value="Rechercher" type="submit"> </form></li> </div> </div> <div class="[ bootsnipp-search animate ]"> <div class="[ container ]"> <form action="http://bootsnipp.com/search" method="GET" role="search"> <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets and hit enter"> <span class="[ input-group-btn ]"> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span> </div> </form> </div> </div> </nav>
.animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-bootsnipp { background-color: rgb(255, 255, 255); border-color: rgb(95, 176, 228); border-radius: 0px; margin-bottom: 0px; z-index: 100; } .navbar-bootsnipp:nth-of-type(2) { border-top-width: 1px; z-index: 50 } .navbar-bootsnipp.affix-top { position: absolute; top: 0px; width: 100%; } .navbar-bootsnipp.affix { top: 0px; width: 100%; } .navbar-bootsnipp .navbar-toggle .icon-bar { background-color: rgb(95, 176, 228); } .navbar-bootsnipp .navbar-brand { color: rgb(95, 176, 228); font-weight: 900; letter-spacing: 2px; } .navbar-bootsnipp .navbar-nav > li > a { border: 0px solid rgb(95, 176, 228); color: rgb(120, 120, 120); padding: 15px 14px; } .navbar-bootsnipp .navbar-nav > li > form > .input-group > input, .navbar-bootsnipp .navbar-nav > li > form > .input-group > .input-group-btn > .btn { border-radius: 0px; } .navbar-bootsnipp .navbar-nav > li:not(.disabled).open > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled).active > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus { border-left-width: 5px; color: rgb(95, 176, 228); padding-left: 10px; } .navbar-bootsnipp .navbar-nav > li.disabled > a { color: rgb(200, 200, 200); } .navbar-bootsnipp .navbar-nav > li > .dropdown-menu { border-radius: 0; margin-right: -1px; min-width: 220px; padding: 0px; } .navbar-bootsnipp .navbar-nav > li:not(.dropdown-right) > .dropdown-menu { left: 0px; margin-left: -1px; right: auto; } .navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a { border-left: 0px solid rgb(95, 176, 228); color: rgb(120, 120, 120); font-size: 16px; font-weight: 400; padding: 10px 20px; white-space: nowrap; } .navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li.active > a, .navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a:focus { background-color: rgb(245, 245, 245); border-left-width: 5px; padding-left: 15px; } .navbar .bootsnipp-profile > a { padding-bottom: 9px; padding-top: 9px; } .navbar .bootsnipp-profile > a > img { border-radius: 50%; width: 32px; } .navbar .bootsnipp-profile > .dropdown-menu { width: 320px; } .navbar .bootsnipp-profile > .dropdown-menu > li > .row { padding: 5px 15px; } .navbar .bootsnipp-profile > .dropdown-menu > li > .row img { width: 100%; } .navbar-bootsnipp .bootsnipp-search { display: none; } .navbar-bootsnipp .bootsnipp-search .form-control { background-color: rgb(235, 235, 235); border-radius: 0px; border-width: 0px; font-size: 24px; padding: 30px 0px; } .navbar-bootsnipp .bootsnipp-search .form-control { background-color: rgb(235, 235, 235); border-radius: 0px; border-width: 0px; font-size: 24px; padding: 25px 0px; } .navbar-bootsnipp .bootsnipp-search .form-control:focus { border-color: transparent; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn { padding: 14px 16px; border-radius: 0px; } .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn.active, .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:hover, .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:focus { padding: 14px 16px 14px 15px; } .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn-default { background-color: rgb(245, 245, 245); } .nav-padding { padding-top: 61px; } @media screen and (min-width: 768px) { .navbar-bootsnipp .navbar-brand { font-size: 20px; height: auto; padding: 15px 5px; } .navbar-bootsnipp .navbar-nav > li > a { font-size: 16px; letter-spacing: 1px; } .navbar-bootsnipp .navbar-nav > li:not(.disabled).open > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled).active > a, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover, .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus { border-bottom-width: 5px; border-left-width: 0px; padding-bottom: 10px; padding-left: 14px; } .navbar-bootsnipp .navbar-nav > li.disabled > a { padding-left: 10px; padding-right: 10px; } .navbar-bootsnipp .bootsnipp-search { background-color: rgb(235, 235, 235); display: block; position: absolute; top: 100%; width: 100%; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; visibility: hidden; } .navbar-bootsnipp .bootsnipp-search.open { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); visibility: visible; } .navbar-bootsnipp .bootsnipp-search > .container { padding: 0px; } } @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700); @import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css); body { background: #DDD; font-size: 15px; } #wrap { margin: 50px 100px; display: inline-block; position: relative; height: 60px; float: right; padding: 0; position: relative; } input[type="text"] { height: px; font-size: 20px; display: inline-block; font-family: "Lato"; font-weight: 100; border: none; outline: none; color: #555; padding: 6px; padding-right: 60px; width: 0px; position: absolute; top: 0; right: 0; background: none; z-index: 3; transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); cursor: pointer; } input[type="text"]:focus:hover { border-bottom: 1px solid #BBB; } input[type="text"]:focus { width: 150px; z-index: 1; border-bottom: 1px solid #BBB; cursor: text; } input[type="submit"] { height: 50px; width: 63px; display: inline-block; color:red; float: right; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat; background-size:20px; text-indent: -10000px; border: none; position: absolute; top: 0; right: 0; z-index: 2; cursor: pointer; opacity: 0.4; cursor: pointer; transition: opacity .4s ease; } input[type="submit"]:hover { opacity: 0.8; }

Related: See More


Questions / Comments: