I'm currently creating a website using Bootstrap, and the issue is that on responsive small display menu I want to make a search input display over other things, but I'm failing to do so. I'm using jQuery.

The intended use would be that when pressing over search icon button, it displays the hidden input over the other elements at full size available, click button again and make it dissapear, but I can't figure a way around if not giving 100% width to the form, but it crashes the layout. I'm linking a jsfiddle to enlighten it. Also this buttons and forms are only visible on small resolutions.

HTML

```
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TEST SITE</a>
      <form id="form-search" class="navbar-form navbar-collapse visible-xs pull-right" role="search">

    <div class="input-group">
      <input type="text" class="form-control" placeholder="Buscar">
      <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"</span></button>
      </span>
    </div>

      </form>
      <button id="colapsador" 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>
      <button id="navi-btn" type="button" class="visible-xs btn btn-default pull-right">
            <span class="glyphicon glyphicon-map-marker"></span>
        </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      </div>
      <div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1>Some site</h1>
            <p>Some text</p>
        </div>
    </div>
</div>

```

Javascript

```
$('#form-search button').click(function(){
        $(this).css({
            'border-top-left-radius':'0',
            'border-bottom-left-radius':'0'
        }).addClass('active');
        $('#form-search').css('width','100%');
        $('#form-search .form-control').css({
            'display':'inherit',
            'width':'100%',
        });
    });

```

CSS

```
#form-search{
border: none;
margin-top: -2px;
margin-right: -0.5em;
width:4.8em;
z-index: 6;
}
#form-search .form-control{
    display:none;
    z-index: 100;
}
#form-search .input-group-btn button{
    border-top-left-radius:4px;
    border-bottom-left-radius: 4px;
}
#navi-btn{
    margin-top: 8px;
    margin-right: 0.5em;
    z-index: 1;
}
#colapsador{
    margin-right: 0.5em;
    z-index: 1;
}

```

z-index properties doesn't seem to work, also if anyone could enlighten me on how to restore original css properties when clicking the button again would be nice, but that's not my main concern, I could search it over.

<http://jsfiddle.net/8vv0dgLc/>