<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <header class="site-header"> <!-- Brand and toggle get grouped for better mobile display --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="logo" class="navbar-brand" href="#link" title=""> Your Company </a> <nav class="site-nav" role="navigation"> <div class="collapse navbar-collapse" id="MainMenu"> <ul class="nav navbar-nav pull-right"> <li class="dropdown menu-background"> <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"> Category <i class="fa fa-angle-down" aria-hidden="true"></i> </a> <ul class="dropdown-menu mega-dropdown-menu"> <li> <a href="#link">Category 1</a> </li> <li> <a href="#link">Category 2</a> </li> <li> <a href="#lins">Category 3</a> </li> <li> <a href="#link">Category 4</a> </li> <li class="divider hidden-xs"></li> <li> <a href="#link"><i class="fa fa-list-ul"></i> View All</a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"> User <i class="fa fa-angle-down" aria-hidden="true"></i> </a> <ul class="dropdown-menu mega-dropdown-menu"> <li><a rel="nofollow" href="/login"><i class="fa fa-sign-in"></i> Sign in</a> </li> <li><a rel="nofollow" href="/register"><i class="fa fa-plus-circle"></i> Sign up</a> </li> <li><a rel="nofollow" href="#faq"><i class="fa fa-question-circle"></i> Help</a> </li> </ul> </li> <li> <a href="/about/">About</a> </li> <li> <a href="/blog/">Blog</a> </li> <li> <a href="#" class="" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Favorite Stores"> <i class="fa fa-lg fa-heart hidden-xs"></i> <span class="hidden-lg hidden-md hidden-sm">Favorite</span> </a> </li> </ul> </div> </nav> <div id="search-form" class="search-form js-search-form"> <form class="form-search" role="search" action="/search.php" method="get"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for Products, Brands and more..." /> <span class="input-group-btn"> <button class="btn btn-info" type="button"> <i class="fa fa-search"></i> </button> </span> </div> <p class="clear top-keyword"><span class="hidden-xs">Top Keywords:</span> <a href="#" title="Google">Google</a>, <a href="#" title="Bootstrap 3">Bootstrap 3</a>, <a href="#" title="Bootsnipp">Bootsnipp</a>, <a href="#" title="Search">Search</a>, <a href="#" title="Suggestion">Suggestion</a> </p> </form> <div class="instant-results"> <ul class="list-unstyled result-bucket"> <li class="result-entry" data-suggestion="Target 1" data-position="1" data-type="type" data-analytics-type="merchant"> <a href="#" class="result-link"> <div class="media"> <div class="media-left"> <img src="http://mellon.co.tz/wp-content/uploads/2016/05/noimage.gif" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Heading 1</h4> <p>0 offers available</p> </div> </div> </a> </li> <li class="result-entry" data-suggestion="Target 2" data-position="1" data-type="type" data-analytics-type="merchant"> <a href="#" class="result-link"> <div class="media"> <div class="media-left"> <img src="http://mellon.co.tz/wp-content/uploads/2016/05/noimage.gif" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Heading 2</h4> <p>3 offers available</p> </div> </div> </a> </li> <li class="result-entry" data-suggestion="Target 3" data-position="2" data-type="type" data-analytics-type="merchant"> <a href="#" class="result-link"> <div class="media"> <div class="media-left"> <img src="http://mellon.co.tz/wp-content/uploads/2016/05/noimage.gif" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">Heading 3</h4> <p>17 offers available</p> </div> </div> </a> </li> </ul> </div> </div> </header>

.site-header { height:450px; /* Remove affer */ width:800px;/* Remove affer */ margin: 50px auto; } #MainMenu { padding:0; } .navbar-brand { padding-left:0; padding-right:0; } /*---------- Search ----------*/ .result-bucket li { padding: 7px 15px; } .instant-results { background: #fff; width: 100%; color: gray; position: absolute; top: 100%; left: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .175); box-shadow: 0 2px 4px rgba(0, 0, 0, .175); display: none; z-index: 9; } .form-search { transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; } .search-form { position: relative; max-width: 100%; } .result-link { color: #4f7593; } .result-link .media-body { font-size: 13px; color: gray; } .result-link .media-heading { font-size: 15px; font-weight: 400; color: #4f7593; } .result-link:hover, .result-link:hover .media-heading, .result-link:hover .media-body { text-decoration: none; color: #4f7593 } .result-link .media-object { width: 50px; padding: 3px; border: 1px solid #c1c1c1; border-radius: 3px; } .result-entry + .result-entry { border-top:1px solid #ddd; } .top-keyword { margin: 3px 0 0; font-size: 12px; font-family: Arial; } .top-keyword a { font-size: 12px; font-family: Arial; } .top-keyword a:hover { color: rgba(0, 0, 0, 0.7); }

$(document).ready(function () { //Hover Menu in Header $('ul.nav li.dropdown').hover(function () { $(this).find('.mega-dropdown-menu').stop(true, true).delay(200).fadeIn(200); }, function () { $(this).find('.mega-dropdown-menu').stop(true, true).delay(200).fadeOut(200); }); //Open Search $('.form-search').click(function (event) { $(".instant-results").fadeIn('slow').css('height', 'auto'); event.stopPropagation(); }); $('body').click(function () { $(".instant-results").fadeOut('500'); }); });