I have implemented a feature in my Bootstrap .navbar where an expanding input field appears only when the search button is clicked. However, the expanded input field currently pushes the menu-items to the left. When I position #search-form absolutely, the input field breaks out on the right side of the container.
Is there a way to make the search-form overlap the menu-items to the left?
Example:
$(function() {
$("#search-button, #search-icon").click(function(e) {
e.preventDefault();
$("#search-button, #search-form").toggle();
});
});#search-form {
display: none;
max-width: 300px;
}<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">This</a>
</li>
<li>
<a href="#">and</a>
</li>
<li>
<a href="#">That</a>
</li>
<li>
<a id="search-button" class="btn btn-link"><i class="glyphicon glyphicon-search"></i></a>
</li>
<li>
<div id="search-form" class="form-group has-feedback">
<div class="input-group">
<label class="control-label sr-only" for="search"></label>
<input type="text" class="form-control" id="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>Edit:
Attached screenshot for reference