"Bootsnipp Navbar with Search"
Bootstrap 3.3.0 Snippet by mouse0270

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-fixed-top ][ navbar-bootsnipp animate ]" 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>
<div class="[ animbrand ]">
<a class="[ navbar-brand ][ animate ]" href="#">Bootsnipp</a>
</div>
</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 navbar-right ]">
<li class="[ visible-xs ]">
<form action="http://bootsnipp.com/search" method="GET" role="search">
<div class="[ input-group ]">
<input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets">
<span class="[ input-group-btn ]">
<button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button>
<button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button>
</span>
</div>
</form>
</li>
<li><a href="#" class="[ animate ]">About</a></li>
<li>
<a href="#" class="[ dropdown-toggle ][ animate ]" data-toggle="dropdown">Resources <span class="[ caret ]"></span></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.animate {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar-bootsnipp {
background-color: rgb(255, 255, 255);
border-color: rgb(95, 176, 228);
border-radius: 0px;
margin-bottom: 0px;
z-index: 100;
}
.navbar-bootsnipp:nth-of-type(2) {
border-top-width: 1px;
z-index: 50
}
.navbar-bootsnipp.affix-top {
position: absolute;
top: 0px;
width: 100%;
}
.navbar-bootsnipp.affix {
top: 0px;
width: 100%;
}
.navbar-bootsnipp .navbar-toggle .icon-bar {
background-color: rgb(95, 176, 228);
}
.navbar-bootsnipp .navbar-brand {
color: rgb(95, 176, 228);
font-weight: 900;
letter-spacing: 2px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function() {
$('a[href="#toggle-search"], .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn[type="reset"]').on('click', function(event) {
event.preventDefault();
$('.navbar-bootsnipp .bootsnipp-search .input-group > input').val('');
$('.navbar-bootsnipp .bootsnipp-search').toggleClass('open');
$('a[href="#toggle-search"]').closest('li').toggleClass('active');
if ($('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
/* I think .focus dosen't like css animations, set timeout to make sure input gets focus */
setTimeout(function() {
$('.navbar-bootsnipp .bootsnipp-search .form-control').focus();
}, 100);
}
});
$(document).on('keyup', function(event) {
if (event.which == 27 && $('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
$('a[href="#toggle-search"]').trigger('click');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Navbar Search Box Auto Expand
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Awesome Search Box

Questions / Comments:

thank before it, very hopeuly...

but, why i can creat text to seacrh in search form can't view text ? thanks

ricky yusuf () - 7 years ago - Reply 0

Im having trouble installing this to my html and css files? any tips to make this work? i added them in new html / css documents, wheres the link? or would you recommend adding this straight into our website document? :)

shaun funnell () - 7 years ago - Reply 0

how can I use this to my web site menu?

김영미 () - 8 years ago - Reply 0

This is a great idea in theory, however it needs some work. It would be great to see an implementation with just the navbar and just the search box so you can differentiate between all the stuff you need for just the search box and everything else. I may work on that myself.

Bryan Pollard () - 8 years ago - Reply 0

Is there an admin on this site that responds to people's complaints???

eugenetoyo` () - 8 years ago - Reply 0

Hello, i tried to integrate the collapsible search in my nav-bar, but it isn't working. Please is there an additional plug-in i need to use or something because i can't seem to find my way round the code. Thanks

eugenetoyo` () - 8 years ago - Reply 0

You need to have jQuery and Bootsrap's javascript on the page in order to make it work!

maxsurguy () - 8 years ago - Reply 0

i want to use this template, but i cant fix the errors, i have tried many time, kindly need help, as soon as possible !!

Amir Khan () - 8 years ago - Reply 0

Hi, this script is great, but works only on Chrome. Fix for IE and Firefox (may 2016 version)

Alyssa Aly () - 8 years ago - Reply 0

Hi there, thanks for this. It works great accept there are a few minor bugs for the desktop search in latest FF and IE 11 where you cannot see the Placeholder text. Best is to amend the following classes:

.navbar-bootsnipp .bootsnipp-search .form-control - reduce padding and add margin top 5px.

.navbar-bootsnipp .bootsnipp-search .form-control:focus - reduce padding and add margin right 5px

Then important!
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn - add position relative and z-index to put that annoying focus glow that bleeds into the red X button behind it!

Now it works perfectly!

Marcelive () - 9 years ago - Reply 0

Thanks for this! I also added the following lines to remove the X button in IE when the text box has focus.

.navbar-bootsnipp .bootsnipp-search input[type=text]::-ms-clear {
display: none;
}

Candi () - 8 years ago - Reply 0

Can you send me the code rectified? i can't see the padding and margin on :focus, there are not.

Thank you very much

Aarón Parres López () - 8 years ago - Reply 0

Thank's you very much irs very nice work

Soulane95 () - 9 years ago - Reply 0

Love it! Can i use it in my webpage?

Juan Navarro () - 9 years ago - Reply 0

Of course you can!

maxsurguy () - 9 years ago - Reply 0

i want to use this template, but i cant fix the errors, i have tried many time, kindly need help, as soon as possible

Amir Khan () - 8 years ago - Reply 0

awesome sir awesome

Frizzy JD () - 9 years ago - Reply 0