"Search Box with dropdown"
Bootstrap 3.0.0 Snippet by mragank

<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" /> <header class="header-style-1"> <div class="header-content"> <div class="container no-padding"> <div class="col-xs-12 col-md-3 logo-holder"> <div class="logo"> <a href="http://www.mssinfotech.com" rel="home"> <img class="img-responsive" src="https://www.mssinfotech.com/img/logo.png" /></a></div> </div> <div class="col-xs-12 col-md-6 top-search-holder no-margin"> <div class="contact-row"> <div class="phone inline"> <i class="fa fa-phone"></i> (+800) 123 456 7890</div> <div class="contact inline"> <i class="fa fa-envelope"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfef2f3e9fcfee9ddeee8ededf2efe9b3fef2f0">[email protected]</a></div> </div> <div class="mc-search-bar"> <form role="search" method="get" action="https://demo2.chethemes.com/mediacenter/"> <div class="input-group"> <label class="sr-only screen-reader-text" for="s">Search for:</label> <input type="text" class="search-field" dir="ltr" value="" name="s" placeholder="Search for products" /> <div class="input-group-addon has-categories-dropdown"> <div class="btn-group show-on-hover "> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <button class="button" type="submit"><i class="fa fa-search"></i></button> <input type="hidden" id="search-param" name="post_type" value="product" /> </div> </div> </form> </div> </div> <div class="col-xs-12 col-md-3 top-cart-row no-margin"> <div class="top-cart-row-container"> <div class="wishlist-compare-holder"> <div class="wishlist"> <a id="yith-wishlist-link" href="https://demo2.chethemes.com/mediacenter/woocommerce-pages/wishlist-2/"> <i class="fa fa-heart"></i> Wishlist <span id="top-cart-wishlist-count" class="value">(0)</span> </a></div> <div class="compare"> <a id="yith-woocompare-link" href="https://demo2.chethemes.com/mediacenter/woocommerce-pages/product-comparison/" class="compare"> <i class="fa fa-exchange"></i> Compare <span id="top-cart-compare-count" class="value">(0)</span> </a></div> </div> <div class="top-cart-holder dropdown animate-dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <div class="basket-item-count"> <span class="cart-items-count count">0</span> <img width="51" height="49" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAxCAYAAAB3aZEhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozRDYwQTgzNTgxMTZFMzExQjJDMUMzMERFMEQ4QzQyMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowOUYzNDgwMEU3MDkxMUUzQUQ3QUY0QTNENkEwQjZEQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowOUYzNDdGRkU3MDkxMUUzQUQ3QUY0QTNENkEwQjZEQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRTA2MjEyOUZDRTZFMzExOTQ5Njg5ODlEOEFEMEQxOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRDYwQTgzNTgxMTZFMzExQjJDMUMzMERFMEQ4QzQyMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj0Gi6AAAAO0SURBVHja3JpriE1RFMf3jMuMkUcIMxhGniNmxqsUyiSTyJfxmJEIeaTkMd5fRgpFPpBEwgc+iJI8GwzJowg34zEegxCmIRp5jpm5/stdN6fT3veec+492zmz6jen1j533/Ofvfdaa+9zk0KhkGgqFqA/wWAwFZc1YCz7PoEqcB1cBLVeFpGXl/dPDGw7WCy5bzl4AfaAneCXl0Ul87Uoyj29wFZwEnTyg5g6C/eOB0dAK6+L2WXxflpTJZ4OALDN4BWYCNqBTJCt+MxSsB+89erIUHw+DIrBBDAMjAOVks+0B5O9PM3M9gOUg1ngp6Q9309iInYb3JL4B4EUv4kRCjHdQA8/iglKfBSe+/lRzCNFHsr1oxgqZ95L/EP8KOYLeCrx0zRL9ZsY1brJAt3/03NTjdjVqZgKiY9GZYBmEc24WrkP7oEDoK1dMQ9AvQfWzQKwjkemA5gDVtsV81JRiw3WKKQ1WKmo5m2JoSDwWOKnadZSk5iZvLcy23O7YgTPU7P15GrAbWsDVkj8VCAfdCImqAgC2RrEzAO9Jf7L4LwTMRTRGiT+HJeF0EJfpmjbxqNjW8wbRndZs4g3i2a7YBwVu2JqFZXAQBcrgXSwROJvBJv46kiM4ESlczuwFnSW+E+DK04rgIjdlfjSQH8XhORwkjRbHY+KiFdMpWI7MCLBQpL4gWXT95hiw2hbDB3ZvpP4p3KGTpTNFuGTIlny3hhv1Ryxb+CGxN+Hi770BAih9bdF0bZDEYT+WsDBl9GR1AyJfwpPt3M8Hb866DvExWMXSdsTET4TF4kUU8YUSNooHyx0IRiQyBIR421EsoOOGzn2V2usmOkE9UyidppmewYKRfhI122rMO5Z3BAjOBDQyeZRcyZOoFF5T0fGn63cHIjzy+jkZjoYDaaBUbwtSOG+7b5jTOLrd16X6437FbfFROwqE6lyO3JlYHeRh7gyr2FsWSDB04J2nb85jDq1NAcjGveaMVpfTpoPeXt9U4Tfkdrpv4g3W1WcGKlsGa57ZHI5bGaYSndKoEPBfAsBYgMolSThAhZ5VsfINBfhV4gZiva5imrBaGMkQownMrt5Dbouhl7Aj7RwqhLNii3Uavk6xGRa6INGrUWMh41lWTrEfLBwDyW8+ijtHy30UaNDzB0hf4lrtBMxAsBxC/+Mch1iqMxfJdQ/Q7kE9sXo4xQ4FKWdzpZf68ozFJYngWsGUdUc5Qot7GsaOHyXGgrXBj48oeCw13It1JR+opUsmpD9EWAAYa+2sbNYLc8AAAAASUVORK5CYII="></div> <div class="total-price-basket"> <span class="lbl">Your Cart:</span> <span class="total-price ft-22"> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span> </span></div> </a> <ul class="dropdown-menu dropdown-menu-mini-cart"> <li> <div class="widget_shopping_cart_content"> <p class="woocommerce-mini-cart__empty-message">No products in the cart.</p> </div> </li> </ul> </div> </div> </div> </div> </div> </header>
header { padding: 40px 0 31px; border-bottom: 1px solid #e0e0e0; } body { font-size: 15px; color: #5D5D5D; background-color: #fff; overflow-x: hidden; margin: 0; padding: 0; font-family: 'Open Sans',sans-serif; } .no-padding { padding: 0; } header .logo-holder .logo { margin: 17px 0; } header .top-search-holder { margin: 0 0 0 -20px; } header .top-search-holder .contact-row { font-size: 14px; line-height: 20px; min-height: 21px; } header .top-search-holder .contact-row .phone { margin: 0 10px 0 0; } header .top-search-holder .contact-row i { color: #59B210; vertical-align: middle; margin: 0 8px 0 0; font-size: 23px; line-height: 23px; } .mc-search-bar { border: 3px solid #5cb210; border-radius: 7px; margin: 8px 0 0; width: 100%; } select#product_cat { display: inline-block; margin: 0; height: 47px; border: 0; background-color: transparent; } .input-group { position: relative; display: table; border-collapse: separate; } .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } .twitter-typeahead { z-index: 1051; width: 100%; } .mc-search-bar .search-field { padding: 13px; border: none; width: 100%; } .tt-hint { color: #999; } .mc-search-bar .search-field { padding: 13px; border: none; width: 100%; } .mc-search-bar .input-group-addon.has-categories-dropdown { border-left: 1px solid #e0e0e0; } .mc-search-bar .input-group-addon { background-color: transparent; border: none; padding: 0 0 0 10px; text-align: left; } .input-group-addon:last-child { border-left: 0; } .mc-search-bar .button { border: none; padding: 18px 17px; margin: -1px -3px -2px 0px; border-radius: 0 10px 10px 0; background: #59B210; position: relative; } .top-cart-row-container>div{ display:inline-block; } header .top-cart-row { padding: 35px 0 0 21px; } header .top-cart-row .wishlist-compare-holder { line-height: 24px; margin: 0 18px 0 0; font-size: 13px; } header .top-cart-row .wishlist-compare-holder a { color: #3D3D3D; } header .top-cart-row .top-cart-holder .dropdown-toggle { display: block; padding: 0; } header .top-cart-row .top-cart-holder .dropdown-menu { width: 332px; left: -170px; top: 65px; padding: 16px 0 0; } .dropdown .dropdown-menu { border-top-color: #59B210; } .dropdown .dropdown-menu { border-radius: 0;. top: 120% !important; } span.cart-items-count.count { position: relative; left: 35px; top: -7px; }

Related: See More


Questions / Comments: