Bootstrap Snippet Responsive top navbar with search box using HTML CSS Bootstrap

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
<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 ---------->
<div class="container">
    <div class="row">
        <h2>Responsive top navbar with search  box</h2>
        </div>
        </div>
        <!-- top navbar -->
        <div class="top-navbar">
                <div class="container">
                  <div class="row text-center">
                      <div class= "col-md-6" >
                      <div class="pull-left" style="color: #ddd;padding-top: 10px;">
                          <a class="tel" href="tel:1800-1035-366" style="color: #ddd;"> <i class="fa fa-phone"></i> Call Us: +91-1234567890</a>
                      </div>
                  </div>
                  <div class="col-md-6">
                   <div class="inner-addon right-addon search-icon">
                    <i class="glyphicon glyphicon-search "></i>
                    <input type="text" placeholder="Search" class="form-control search-box" />
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end top navbar-->
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
.top-navbar {
  background: #2e2e2e none repeat scroll 0 0;
  /*color: #d6d6d6;
  padding: 5px 0;
*/}
.search-box {
  width: 250px;
  cursor: pointer;
  margin: 0 auto;
  border: .5px solid rgb(232, 238, 241);
  border-radius: 28px;
  color: rgb(119, 126, 128);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
}
.search-icon {
  width: 250px;
  padding: 5px;
  border-radius: 24px;
  float: right;
}
.inner-addon { 
  position: relative; 
}
/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 13px;
  pointer-events: none;
}
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}
.left-addon input  { padding-left:  30px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive top navbar with search box"
Bootstrap 3.3.0 Snippet by aswanik11

Related: See More

Questions / Comments:

"Responsive top navbar with search box" Bootstrap 3.3.0 Snippet by aswanik11

Related: See More

Questions / Comments:

"Responsive top navbar with search box"
Bootstrap 3.3.0 Snippet by aswanik11