Twitter Bootstrap with search bar
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbarHeader">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<div class="container"> <a class="brand scroller" data-section="body" href="/"> <img src="logo_header.jpg" alt="logo" height="70" width="231" /> </a>
<div>
<ul class="nav pull-right" id="i18n-regions">
<li class="lang"> <a href="javascript:{}" class="it-CH culture" title="Italiano"><img src="images/flags/it.png" alt="Italiano" height="11" width="16" /></a>
</li>
<li class="lang"> <a href="javascript:{}" class="de-DE culture" title="Deutsch"><img src="images/flags/de.png" alt="Deutsch" height="11" width="16" /></a>
</li>
<li class="lang"> <a href="javascript:{}" class="fr-FR culture" title="Français"><img src="images/flags/fr.png" alt="Français" height="11" width="16" /></a>
</li>
<li class="lang"> <a href="javascript:{}" class="en-GB culture" title="English"><img src="images/flags/en.png" alt="English" height="11" width="16" /></a>
</li>
</ul>
</div>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li> <a href="#">Item 1</a>
</li>
<li> <a href="#">Item 2</a>
</li>
<li> <a...
CSS
[class*="span"], .uneditable-input[class*="span"], .row-fluid[class*="span"] {
width: 100px !important;
}