<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="menu-item active"><a href="#">About </a></li> <ul class="nav navbar-nav"> <li class="menu-item"><a href="#">Contact </a></li> <ul class="nav navbar-nav"> <li class="menu-item"><a href="#">Support <i class="fa fa-support"></i></a></li> <ul class="nav navbar-nav"> <li class="menu-item"><a href="#">Blog <i class="fa fa-comments-o"></i></a></li> <li class="menu-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="menu-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Notifications <i class="fa fa-wrench"></i></a> </li> <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit Account </a> <ul class="dropdown-menu"> <li class="menu-item "><a href="#">Page with comments</a></li> <li class="menu-item "><a href="#">Page with comments disabled</a></li> <li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More</a> <ul class="dropdown-menu"> <li><a href="#">3rd level link more options</a></li> <li><a href="#">3rd level link</a></li> </ul> </li> </ul> </li> <li class="divider"></li> <li class="menu-item dropdown"><i class="fa"></i><a href="#" class="dropdown-toggle" data-toggle="dropdown">Logout <i class="fa fa-power-off padding-left-ten-px red-text"></i></a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="http://www.twitter.com/" title="Twitter" rel="nofollow" target="_blank"> <i class="fa fa-twitter-square fa-lg twitter-blue"></i> </a> </li> <li> <a href="http://www.facebook.com/" title="Facebook" rel="nofollow" target="_blank"> <i class="fa fa-facebook-square fa-lg facebook-blue"></i> </a> </li> <li> <a href="http://www.linkedin.com/" title="LinkedIn" rel="nofollow" target="_blank"> <i class="fa fa-linkedin-square fa-lg linkedin-blue"></i> </a> </li> <li> <a data-original-title="Google+" rel="tooltip" href="#" class="btn btn-google" data-placement="left"> <i class="fa fa-google-plus fa-lg google-blue"></i> </a> </li> <li> <a data-original-title="Facebook" rel="tooltip" href="#" class="btn btn-facebook" data-placement="left"> <i class="fa fa-facebook"></i> </a> </li> <li> <form class="navbar-search navbar-form" method="get" action=""> <input class="form-control" placeholder="Search" name="s" type="text"> </form> </li> </ul> </ul> </ul> </ul> <!-- DROPDOWN LOGIN STARTS HERE --> <ul id="signInDropdown" class="nav navbar-nav navbar-right"> <li class="dropdown"> <button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-info navbar-btn dropdown-toggle"><i class="glyphicon glyphicon-user"></i> Login <span class="caret"></span></button> <ul class="dropdown-menu"> <li style="width: 250px;"> <form class="navbar-form form" role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope color-blue"></i></span> <!--EMAIL ADDRESS--> <input id="emailInput" placeholder="email address" class="form-control" oninvalid="setCustomValidity('Please enter a valid email address!')" onchange="try{setCustomValidity('')}catch(e){}" required="" type="email"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock color-blue"></i></span> <!--PASSWORD--> <input id="passwordInput" placeholder="password" class="form-control" oninvalid="setCustomValidity('Please enter a password!')" onchange="try{setCustomValidity('')}catch(e){}" required="" type="password"> </div> </div> <!-- BASIC ERROR MESSAGE <div class="form-group"> <label class="error-message color-red">*Email & password don't match!</label> </div> --> <div class="form-group"> <!--BUTTON--> <button type="submit" class="btn btn-primary form-control">Login</button> </div> <div class="form-group"> <!--RESET PASSWORD LINK--> <span class="pull-right"><a href="#">Forgot Password?</a></span> </div> </form> </li> </ul> </li> </ul> <!-- DROPDOWN LOGIN ENDS HERE --> </div> </div> </div>

.dropdown-submenu{position:relative;} .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} /*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/ .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} .dropdown-submenu:hover>a:after{border-left-color:#ffffff;} .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} .padding-left-ten-px { padding-left: 10px; } .red-text { color: #FF0000; } .twitter-blue { color: #1ec7fe; } .facebook-blue { color: #3c599f; } .linkedin-blue { color: #0080b2; } .google-blue { color: #dd4b39 } .navbar-right{padding-right: 25px;} .form-group{padding: 10px;} .form-panel-width { width: 220px; }/*YOU CAN MAKE PANEL AS WIDE AS NEEDED*/ .color-blue {color: #0080c5;} .color-red {color: #FF0000;} .error-message {font-size: 10px;} @media screen and (min-width: 30em ) { .form-panel-width { width: 100%; } }