<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2>Fluid and Responsive Tiny Nav</h2> <br /> <br /> <nav class="navbar navbar-default navbar-xs" role="navigation"> <!-- 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="#"><b>Tiny</b> Navbar</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><a href="#"><i class="glyphicon glyphicon-adjust"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="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> <!-- Left dropdown --> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-cog"></i> <b class="caret"></b></a> <ul class="dropdown-menu login-panel"> <li> <div class="dropdown-header"> <span class="login-header color-blue">Sign In</span> <span class="forgot-password color-blue"><a href="">Forgot password?</a></span> </div> <div class="clearfix"></div> <div style="padding: 8px;"> <form id="loginform" class="form-horizontal" role="form" autocomplete="off"> <div style="margin-bottom: 10px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user color-blue"></i></span> <!-- USERNAME OR EMAIL ADDRESS --> <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email" pattern="[a-zA-Z0-9]{5,}" title="Minimum 5 letters or numbers." oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" required> </div> <div style="margin-bottom: 10px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock color-blue"></i></span> <!-- PASSWORD --> <input id="login-password" type="password" class="form-control" name="password" placeholder="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> </div> <div class="center-text"> <label><input id="login-remember" type="checkbox" name="remember" value="1"> Remember me</label> </div> <div class="center-text"> <span class="error-message color-red"><i class="glyphicon glyphicon-warning-sign"></i> Username & password don't match!</span> </div> <div style="margin-top:10px" class="form-group"> <!-- Button --> <div class="col-sm-12 controls center-text"> <a id="btn-login" href="#" class="btn btn-block btn-success">Login</a> <!--<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>--> </div> </div> </form> </div> </li> <!--<li class="divider"></li>--> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> <br /> <br /> <h2>Width Contraint but Responsive Tiny Nav</h2> <br /> <br /> <div class="container"> <nav class="navbar navbar-default navbar-xs" role="navigation"> <!-- 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="#"><b>Tiny</b> Navbar</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><a href="#"><i class="glyphicon glyphicon-adjust"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="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> <!-- Left dropdown --> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-cog"></i> <b class="caret"></b></a> <ul class="dropdown-menu login-panel"> <li> <div class="dropdown-header"> <span class="login-header color-blue">Sign In</span> <span class="forgot-password color-blue"><a href="">Forgot password?</a></span> </div> <div class="clearfix"></div> <div style="padding: 8px;"> <form id="loginform" class="form-horizontal" role="form" autocomplete="off"> <div style="margin-bottom: 10px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user color-blue"></i></span> <!-- USERNAME OR EMAIL ADDRESS --> <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email" pattern="[a-zA-Z0-9]{5,}" title="Minimum 5 letters or numbers." oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" required> </div> <div style="margin-bottom: 10px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock color-blue"></i></span> <!-- PASSWORD --> <input id="login-password" type="password" class="form-control" name="password" placeholder="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> </div> <div class="center-text"> <label><input id="login-remember" type="checkbox" name="remember" value="1"> Remember me</label> </div> <div class="center-text"> <span class="error-message color-red"><i class="glyphicon glyphicon-warning-sign"></i> Username & password don't match!</span> </div> <div style="margin-top:10px" class="form-group"> <!-- Button --> <div class="col-sm-12 controls center-text"> <a id="btn-login" href="#" class="btn btn-block btn-success">Login</a> <!--<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>--> </div> </div> </form> </div> </li> <!--<li class="divider"></li>--> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav> </div>

.navbar-xs { min-height:22px; border-radius:0; border-bottom: solid 5px #0080c5; } .navbar-xs .navbar-brand{ padding: 2px 8px;font-size: 14px;line-height: 14px; } .navbar-xs .navbar-nav > li > a { border-right:1px solid #ddd; padding-top: 2px; padding-bottom: 2px; line-height: 16px; } .login-panel { min-width: 250px; border-top: 5px solid #0080c5; } .dropdown-header { display: block !imnportant; padding-bottom: 30px; height: 10px; } .login-header { font-size: 20px; font-weight: bold; display: inline; float: left; } .forgot-password { font-size: 10px; display: inline; float: right; vertical-align: bottom; padding-top: 10px; } .center-text { text-align: center } .error-message { font-size: 11px; } /* COLORS */ .color-blue { color: #0080c5; } .color-red { color: #FF0000; }