Bootstrap V2 Search icon in navbar search

Twitter Bootstrap .^. Website Tutorials | Submited Nov 25, 2012

Written by: Yohn

In a project I was working on, I wanted to put twitter's navbar-search form within the navbar, and I wanted to use an icon within the search box to act like the button. I also wanted to use the rounded corners that the search-query input class has instead of the blocky like search form with the actual button to click. So heres what I came up with to put the search icon in the beginning of the input box that the user can click to submit the form however you'd like.

Heres what it looks like

HTML Code

Code:
<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-search pull-right">
      <div>
        <em class="icon-search"></em>
        <input type="text" class="search-query span2" placeholder="Search">
      </div>
    </form>
  </div>
</div>

CSS Code for Left Side Icon

Code:
.navbar-search div {position:relative;}
.navbar-inner .navbar-search .search-query:focus,
.navbar-inner .navbar-search .search-query.focused,
.navbar-inner .navbar-search .search-query {padding-left: 28px;}
.navbar-search em.icon-search {
  position: absolute;
  left: 10px;
  top: 7px;
  cursor:pointer;
}

CSS Code for Right Side Icon

Code:
.navbar-search div {position:relative;}
.navbar-inner .navbar-search .search-query:focus,
.navbar-inner .navbar-search .search-query.focused,
.navbar-inner .navbar-search .search-query {padding-right: 28px;}
.navbar-search em.icon-search {
  position: absolute;
  right: 10px;
  top: 7px;
  cursor:pointer;
}

jQuery

Code:
$('.navbar-search .icon-search').click(function(){
  alert('do whatever with '+$('.search-query').val())  
})

0 Like Add to Favorites