"Admin Nav Bar with Popup Sign in"
Bootstrap 2.3.2 Snippet by govs

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#" name="top">Main Manu</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"> Transactions</a></li> <li class="divider-vertical"></li> <li ><a href="#"> Templates</a></li> <li class="divider-vertical"></li> <li><a href="#"></i> Tasks</a></li> <li class="divider-vertical"></li> <li><a href="#"></i> Contacts</a></li> <li class="divider-vertical"></li> <li><a href="#"></i> Administration</a></li> <li class="divider-vertical"></li> <li><a href="#"></i> Partners</a></li> <li class="divider-vertical"></li> <li><a href="#"></i> Help</a></li> <li class="divider-vertical"></li> </ul> <ul class="nav pull-right"> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Mourad Zerroug<strong class="caret"></strong></a> <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;"> <form> <div class="row"> <div class="col-sm-8"> <div class="row"> <div> Mourad Zerroug</div> <small>mouradz@car.org</small> </div> <div class="row"> <div> Company office-2 </div> <div> 123 Maple </div> <div> Los Angelis -CA123 </div> </div> </div> <div class="col-sm-4"> <img src="http://placehold.it/100x100" alt="..." class="img-rounded"> <div class="clearfix"></div> <div class="fileUpload btn"> Add Photo <input type="file" class="upload" /> </div> </div> </div> </form> </div> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </div> <!--/.navbar-inner --> </div> <!--/.navbar -->
.fileUpload { position: relative; overflow: hidden; margin: 5px; text-decoration: underline; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }
$(document).ready(function(){ //Handles menu drop down $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); });

Related: See More


Questions / Comments: