"Toggle navbar with Slide Down Animation"
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 ---------->
<div class="container-fluid">
<!-- Second navbar for categories -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a>
</li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1">
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Graphic design</a></li>
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
/*
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
*/
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard PRO
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments:

Very nice work!!! How can i make it work on the left side instead of the right? thanks a lot

Luis16287 () - 8 years ago - Reply 0

How can I make it to the left inside of the right?? Its amazing thanks alot

Jasmine825 () - 8 years ago - Reply 0

how to download??

rajesh () - 9 years ago - Reply 0

pls tell how to fix the dotted border which comes after tapping any element...
sorry i am new

Pixels0o1 () - 9 years ago - Reply 0

Add following style
element:focus{outline: none}

Ahmed Khatib () - 8 years ago - Reply 0

Sorry, can't see any difference to the original. No effect, no animation. (latest Safari/webkit)

pepperstreet () - 9 years ago - Reply 0

Very nice

Subhankar Prasad () - 9 years ago - Reply 0

A very good snippet indeed but the "Categories button" in the first example seems to get hidden in the submenu once I convert the nav bar into "navbar-fixed-top"...

Vijay.K () - 9 years ago - Reply 0

Hey!

Thanks for a nice snippet!

I've added register button to sign-in bar. But have issues with alignment now.

- Forms are stretching incorrectly in full browser window
http://oi61.tinypic.com/ieg...
- Forms and buttons overlapping in mobile browser window
http://oi60.tinypic.com/27w...
- Buttons differs in size in mobile browser window (even with same text on them)
- Buttons allowed to be clicked simultaneously :)

I'm was pretty much sure that most of the issues caused by 767px value, but increasing it didn't help to expand full menu.

Thanks

Systems Rebooter () - 9 years ago - Reply 0

Can you tell me how to remove the over flow thing please because i really want the scroll thing. Sorry i'm new to this ! Thanks :)

Richard () - 9 years ago - Reply 0

What scrolling thing? The overflow is only there to prevent the animation for looking weird on navbars that are not at the top of the window/browser.

mouse0270 () - 9 years ago - Reply 0

i have completely removed the overflow but it's still not working :-(

before:

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }

after:

.navbar .navbar-collapse { position: relative; }

still doesn't work :/

btw awsome work man i really love them and want to use them

Richard () - 9 years ago - Reply 0

Fixed it now, thanks!

I forgot to add these:

<script src="http://code.jquery.com/jque..."></script>

<script src="http://maxcdn.bootstrapcdn...."></script>

Richard () - 9 years ago - Reply 0

I am adding two toggle buttons instead of one (Login & Search). How can i toggle between two buttons. (Like if i click on login and then click on search, the login button should get toggled itself.
*I am bit new to coding, so need you help.
and i would like to say that it's a great navbar by you.

Gautam Chaudhary () - 9 years ago - Reply 0

something like this: http://bootsnipp.com/snippe...

mouse0270 () - 9 years ago - Reply 0

Absolutely!! But is it possible if i can toggle-off one button when i click on other.

Gautam Chaudhary () - 9 years ago - Reply 0

perfect

Top-Serveurs () - 9 years ago - Reply 0

I did something similar to this

Nexxoz () - 9 years ago - Reply 0

welll the dropdown will not work after this

Ricardo Contente () - 9 years ago - Reply 0

I know. I posted an explanation as to why within the snippet

mouse0270 () - 9 years ago - Reply 0

Why is there a need for overflow hidden on .navbar-collapse? This appears to work fine for me with it removed due to the navbar being at the top of the page so the toggled nav is hidden anyway without the need for overflow hidden.

Simon () - 9 years ago - Reply 0

Yes, if your navbar is at the top of the page the overflow could be removed. but if it isn't. the effect will look weird if the overflow isn't there.

mouse0270 () - 9 years ago - Reply 0

Amazing

allaghi () - 9 years ago - Reply 0

Beautiful effect, I love it. Thank you my friend. :)

Maria del Carmen () - 9 years ago - Reply 0