<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="navbar navbar-default navbar-xl navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <!-- 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="#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="#">BRAND</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 class="active"> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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> <ul class="nav navbar-nav navbar-right"> <li> <p class="navbar-text">Already have an account?</p> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> <ul id="login-menu" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12">Login via <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> </div>or <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required=""> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required=""> <div class="help-block text-right"> <a href="">Forget the password ?</a> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> <div class="checkbox"> <label> <input type="checkbox">keep me logged-in</label> </div> </form> </div> <div class="bottom text-center">New here ? <a href="#"><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control input-lg" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-lg">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- END NAV XL --> <!-- START NAV SM --> <nav class="navbar navbar-default navbar-sm navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <!-- 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="#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="#">BRAND</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 class="active"> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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> <ul class="nav navbar-nav navbar-right"> <li> <p class="navbar-text">Already have an account?</p> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> <ul id="login-menu" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12">Login via <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> </div>or <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required=""> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required=""> <div class="help-block text-right"> <a href="">Forget the password ?</a> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> <div class="checkbox"> <label> <input type="checkbox">keep me logged-in</label> </div> </form> </div> <div class="bottom text-center">New here ? <a href="#"><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control input-sm" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-sm">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- END NAV SM --> <!-- START NAV XS --> <nav class="navbar navbar-default navbar-xs navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <!-- 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="#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="#">BRAND</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 class="active"> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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> <ul class="nav navbar-nav navbar-right"> <li> <p class="navbar-text">Already have an account?</p> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> <ul id="login-menu" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12">Login via <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> </div>or <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required=""> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required=""> <div class="help-block text-right"> <a href="">Forget the password ?</a> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> <div class="checkbox"> <label> <input type="checkbox">keep me logged-in</label> </div> </form> </div> <div class="bottom text-center">New here ? <a href="#"><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control input-xs" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-xs">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- END NAV XS -->

.navbar-xl { min-height:80px; height: 80px; } .navbar-xl .navbar-brand{ padding: 0px 12px;font-size: 24px;line-height: 80px; } .navbar-xl .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 80px; font-size:24px; } .navbar-xl .navbar-text{ padding: 10px 12px;font-size: 24px; } .navbar-xl .navbar-form { padding-top: 10px; padding-bottom: 10px; } .navbar-sm { min-height:28px; height: 40px; } .navbar-sm .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; } .navbar-sm .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 40px; } .navbar-sm .navbar-form { margin-top: 4px; padding-top: 0px; padding-bottom: 2px; } .navbar-sm .navbar-text{ margin: 13px; padding: 0px 12px; line-height: 1; } .navbar-xs { min-height:28px; height: 28px; } .navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; } .navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; } .navbar-xs .navbar-form { margin-top: 3px; padding-top: 0px; padding-bottom: 2px; } .input-xs { height: 22px; padding: 0px 5px; font-size: 12px; line-height: 1; border-radius: 3px; } .navbar-xs .navbar-text{ margin: 7px; padding: 0px 12px; line-height: 1; } #login-menu { min-width: 250px; padding: 14px 14px 0; overflow: hidden; background-color: rgba(255,255,255,.8);}