Input group brake responsive layout

Twitter bootstrap input group brake responsive layout

by Ajay Patel

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top home-nav" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <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="/">Title</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="/explore">Home 2</a></li>
                <!-- Show login button or User info once one logged in -->
                <li><a href="/login">Login</a></li>
                <li><a href="/users/create" class="">Sign in</a></li>
            </ul>
            <!-- Search Form -->
            <form class="navbar-form navbar-right" action="" role="search">
                <div class="form-group">
                    <!--<div class="input-group">-->
                        <input type="text" class="form-control home-search-input"/>
                        <!--<span class="input-group-addon">Search</span>-->
                    <!--</div>-->
                </div>
            </form>
        </div>
    </div>
</nav>

<div class="container">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra....

JavaScript

$(function () {

          $(".home-btn").click(function () {
              window.location = $(this).find("a").attr('href');
          })
          $(".home-search-input").focus(function () {
              $("div.pull-right").animate({
                  width: "40%"
              }, 500)
          }).blur(function () {
              $("div.pull-right").animate({
                  width: "30%"
              }, 500)
          });
      });