<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 ----------> <nav class="navbar navbar-default navbar-static"> <div class="container-fluid"> <!-- Brand and toggle responsive screen --> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> <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> </div> <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">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> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul> </div> <!-- /.navbar-collapse --> <ul class="nav navbar-nav navbar-right mobileNav pull-right"> <li class="dropdown"> <a title="email" href="#"><span class="glyphicon glyphicon-star"></span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span><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> </ul> </li> </ul> </div> <!-- /.container-fluid --> </nav>

.mynav.pull-left > li > a { color: #777; padding-top: 15px; padding-bottom: 15px; } .mobileNav { position: absolute; right: 20px; top: 0px; } .mobileNav > li { display: inline-block; vertical-align: text-top; float: left; } .navbar-right ul.dropdown-menu { text-align: right; } @media only screen and (max-width: 768px) { .mobileNav { text-align: right; } .navbar-nav .open .dropdown-menu { border: 1px solid #ccc; margin-top: 2px; background: white; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); /** Fix position **/ position: absolute; left: auto; right: 0; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:active, .navbar-default .navbar-nav>.open>a:focus { background: none; } } .navbar-toggle { float: left; margin-left: 15px; } .navbar-inverse { background-color: #337ab7; border-color: #337ab7; } .navbar-inverse .navbar-brand { color: #ffffff; white-space: nowrap; }