"Toggle navbar"
Bootstrap 3.3.0 Snippet by maridlcrmn

<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" 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> <li><a href="#">Print</a></li> <li><a href="#">Motion</a></li> <li><a href="#">Mobile apps</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for sign in --> <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-2"> <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-2"> <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" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Sign in</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse2"> <form class="navbar-form navbar-right form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="Email">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email" autofocus required /> </div> <div class="form-group"> <label class="sr-only" for="Password">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password" required /> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for search --> <nav class="navbar navbar-inverse"> <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-3"> <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-3"> <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" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse3"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for profile settings --> <nav class="navbar navbar-inverse"> <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-4"> <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-4"> <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" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse" role="search" id="nav-collapse4"> <li><a href="#">Support</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">My profile</a></li> <li><a href="#">Favorited</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </div><!-- /.container-fluid -->
/* 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; } .navbar .navbar-collapse { position: relative; } .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; } @media screen and (max-width: 767px) { .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } .navbar .nav-collapse { margin: 7.5px auto; padding: 0; } .navbar .nav-collapse .navbar-form { margin: 0; } .nav-collapse>li { float: none; } }

Related: See More


Questions / Comments:

any reason as to why the "Search" animation doesn't display when i'm implementing the html and CSS code? - it doesn't appear to do anything when clicked. Am i missing something?

Ciarán Graham () - 8 years ago - Reply 1


It works for me. I am using Chrome

Shaun () - 7 years ago - Reply 0


Can you have more than 1 clickable secondary navigation, and will it cause issues with scaling on mobile devices being that the grid is only one column wide? This is an awesome implimentation of the navbar.

John Jack () - 8 years ago - Reply 0


So simple, so awesome! ;)

pepperstreet () - 8 years ago - Reply 0


Of course you created something wonderful again! I added a nice slide down animation here: http://bootsnipp.com/snippe...

Keep up the wonderful design work, can't wait to see what else you create.

mouse0270 () - 8 years ago - Reply 0


What does it do beyond the built-in NavBar? I'm sure I'm missing something, but I'm not getting what the 'Toggle' part of the name means...

Bob () - 8 years ago - Reply 0


Click on the last item in the nav bar, it is basically a toggle for a secondary navigation

mouse0270 () - 8 years ago - Reply 0


Thanks. Like I said, I'm was sure I was missing something.

Bob () - 8 years ago - Reply 0


Awesome stuff!!

Joel () - 8 years ago - Reply 0


Awesome!

Zulfikar Nore () - 8 years ago - Reply 0


Very nice!

maxsurguy () - 9 years ago - Reply 0


This appears to be the exact same nav that mouse0270 uploaded - http://bootsnipp.com/snippe.... Who is the real OP??

Don Barracuda () - 7 years ago - Reply 0


Hi @larssonk:disqus thank you for notice this, but I would like to point out that @maridlcrmn is a very talented designer and her was the first one. I adjusted it to have an a smoother slide down animation. Bootsnipp isn't designed very well for creators and users. It is hard to tell if something was forked, where it was forked from and who made the very original. However, if you ever see this come up you can often times click on the gear icon and then see if it says "Forked From" you should be able to use this feature to go back to the original poster. But keep in mind this feature was not built with the best user experience in mind.

mouse0270 () - 7 years ago - Reply 0


Thanks for the info!

Don Barracuda () - 7 years ago - Reply 0