<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"> <div class="logo clear"> <a href="#">Jeremy<b>King</b></a> </div> <div class="search-button"> <button id="search"><i class="fa fa-search"></i></button> <div class="search-popup"> <div class="search-bg"></div> <div class="search-form"> <form action=""> <div class="form"> <input type="text" id="search" placeholder="input search string and hit enter"> <label for="search"><i class="fa fa-search"></i></label> </div> </form> </div> </div> </div> <ul class="social-media"> <li><a href=""><i class="fa fa-facebook"></i></a></li> <li><a href=""><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-google-plus"></i></a></li> </ul> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Pages</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Photoes</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <script> $('#search').click(function() { $('.search-form').animate({right: 0}, 50); $('.search-popup').show(); $('.search-bg').click(function() { $('.search-popup').hide(); $('.search-form').animate({right: '-100%'}, 50); }); }); </script>

* { box-sizing: border-box; } body { margin: 0; font-family: 'Open Sans', sans-serif; background: url('http://cdn.magdeleine.co/wp-content/uploads/2016/06/sW4FHZKlQ4qQLNTy3yS0__IMG0278.jpg') no-repeat center top/cover; } ul { margin: 0; padding: 0; } .clear:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .clear { zoom: 1; } *:first-child+html .clear { zoom: 1; } .navbar { position: fixed; top: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.2); } .logo { float: left; } .logo a { text-decoration: none; display: block; padding: 1.45em 20px; color: #dad6d5; text-transform: uppercase; font-size: 1.2em; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -ms-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; } .logo a:hover { color: #c14240; } .search-button { float: right; } .search-button button { border: none; background: transparent url('http://webdesign-finder.com/lifecoach/wp-content/themes/lifecoach/images/menu-search.png') no-repeat center center/cover; padding: 1.9em 20px; color: white; } .search-popup { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; } .search-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); } .search-popup label { color: white; } .search-form { display: block; margin: 7em 4em; position: relative; right: -100%; } .form { position: relative; } .form input { outline: none; border-width: 0 0 1px 0; border-style: none none solid none; border-color: #dad6d5; background-color: transparent; width: 100%; padding: 1em 0; color: #dad6d5; } .form input:focus::-webkit-input-placeholder { opacity: 0; } .form input:focus::-moz-placeholder { opacity: 0; } .form input:-ms-input-placeholder { opacity: 0; } .form input:focus:-moz-placeholder { opacity: 0; } .form label { position: absolute; top: 25%; right: 0; } .social-media { list-style: none; float: right; } .social-media li { display: inline-block; } .social-media li a { text-decoration: none; display: block; padding: 1.9em 15px; color: #dad6d5; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -ms-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; } .social-media li a:hover { color: #c14240; } .list { list-style: none; text-align: center; } .list li { display: inline-block; } .list li a { text-decoration: none; display: block; padding: 1.9em 15px; color: #dad6d5; text-transform: uppercase; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -ms-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; } .list li a:hover { color: #c14240; }