Inline Navbar Search
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</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>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control pull-right" style="width: 300px; margin-right: 35px, border: 1px solid black; background-color: #e5e5e5;" placeholder="Search">
<span class="input-group-btn">
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-remove">
<span class="sr-only">Close</span>
</span>
</button>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search">
<span class="sr-only">Search</span>
</span>
</button>
</span>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="alert alert-info">
<strong>Alerts Dont Work on Bootsnipp!</strong> So when you hit enter or submit this form your result will show up in the green box below!
</div>
<div class="alert alert-success">
<strong>Your Result!</strong> <span id="showSearchTerm"></span>
</div>
</div>
</div>
body {
padding: 60px 0px;
}
.navbar-collapse {
position: relative;
padding-top: 30px !important;
max-height: 270px;
}
.navbar-collapse form[role="search"] {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
padding: 0px;
margin: 0px;
z-index: 0;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
padding: 8px 12px;
border-radius: 0px;
border-width: 0px;
color: rgb(119, 119, 119);
background-color: rgb(248, 248, 248);
border-color: rgb(231, 231, 231);
box-shadow: none;
outline: none;
}
.navbar-collapse form[role="search"] input {
padding: 16px 12px;
font-size: 14pt;
font-style: italic;
color: rgb(160, 160, 160);
box-shadow: none;
}
.navbar-collapse form[role="search"] button[type="reset"] {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0px !important;
padding-right: 38px !important;
}
.navbar-collapse form[role="search"] {
width: 38px;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
padding: 15px 12px;
}
.navbar-collapse form[role="search"] input {
padding: 25px 12px;
font-size: 18pt;
opacity: 0;
display: none;
}
.navbar-collapse form[role="search"].active {
width: 100%;
}
.navbar-collapse form[role="search"].active button,
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
}
.navbar-collapse form[role="search"].active input {
width: 100%;
}
}
Line 49 in the HTML has a minor typo in it, just after ‘margin-right: 35px’ you have used a ‘,’ (comma) instead of needing to use a ‘;’ (semi-colon).,Not working for BS 3.3.2. When I click the button search, no event show.,Not seem a good snippet, a incredible big js and css for a simple thing like this,It is not working in any of the web browsers. I am using bootstrap 3.3.2. Please help,there is a bug. the search bar bounces to the right when you change the theme and it did it when i took it and modified it. I figured out the issue but I can’t figure out where the bug is in the code to fix it for mobile because it’s not collapsing the way it should,Nice! How To Modify For Firefox? Only working in Chrome…,The author is Siraj

Loading...