I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.

I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.

In particular how would I create a search nav bar in Bootstrap 3 with the following features?

1. On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
2. On Focus HTML drop down would show similar to Google Developers site.

3. I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:

4. On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).

I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (/), but i'd like to implement this with the bootstrap classes already in place.

Here's what I have so far with a help from Fizzix: JSFiddle Demo HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Others <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Categories</a></li>

      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="search-box"> 

            <input value="Search" type="text" class="form-control" />
            <i class="glyphicon glyphicon-search"></i>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

CSS:

body {
    margin: 20px;
    background: #455a64;
}
.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}

I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.

I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.

In particular how would I create a search nav bar in Bootstrap 3 with the following features?

1. On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
2. On Focus HTML drop down would show similar to Google Developers site.

3. I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:

4. On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).

I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (http://tympanus/codrops/2010/07/14/ui-elements-search-box/), but i'd like to implement this with the bootstrap classes already in place.

Here's what I have so far with a help from Fizzix: JSFiddle Demo HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Others <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Categories</a></li>

      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="search-box"> 

            <input value="Search" type="text" class="form-control" />
            <i class="glyphicon glyphicon-search"></i>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

CSS:

body {
    margin: 20px;
    background: #455a64;
}
.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jun 24, 2015 at 6:04 james asked Jun 24, 2015 at 1:34 jamesjames 22611 gold badge44 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Your question will most likely be closed since you have not tried to do this yourself first and you're basically asking us to do all the hard work without any attempt

I tried to mimic most of the styles, although the placeholder colour is the tricky part. Instead, I added the value of Search to the input and styled the colour. You can handle the placeholder part through Angular instead.

Unfortunately I'm strapped for time at the moment and am unable to get the dropdown working on focus.

If you would like a full breakdown of the CSS, just let me know and I can go through it step by step with you.

WORKING DEMO

CSS:

.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}

HTML:

<div class="search-box">
    <input value="Search" type="text" class="form-control" />
    <i class="glyphicon glyphicon-search"></i>
</div>