"Search Box with dropdown"
Bootstrap 3.0.0 Snippet by mragank

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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" />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: