<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Twitter Bootstrap 3 Fixed Navbar</title>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn-primary{
margin 10px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" onclick="openNav()" ng-init="navCollapsed = true">
<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" ng-click="openHome()" style="cursor: pointer;">
<span>Brand Name
</span>
</a>
</div>
<div class="collapse navbar-collapse pull-right" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav navbar-right temp " style="pointer-events: auto;">
<li>
<button type="button" class="btn btn-primary">Ask a Question</button>
</li>
<li>
<button type="button" class="btn btn-primary">Trending</button>
</li>
<li>
<button type="button" class="btn btn-primary">Open </button>
</li>
<li>
<button type="button" class="btn btn-primary">Answered </button>
</li>
<li>
<button type="button" class="btn btn-primary">Closed</button>
</li>
<li>
<div class="dropdown dropdown-right user-menu" uib-dropdown="">
<div class="dropdown-toggle" id="user-menu" uib-dropdown-toggle="">
<div class="clearfix">
<div class="username">
<h4>Username</h4>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- I want the following Div to the right of the above div but i dont want to collapse it-->
<div class="navbar-header pull-right" name="problem nav">
<ul class="nav navbar-right navbar-nav">
<li class="navbar-right">
<div class="dropdown dropdown notification" uib-dropdown="">
<div data-toggle="dropdown" uib-dropdown-toggle="" class="dropdown-toggle" id="notification" aria-haspopup="true" aria-expanded="false">
<span>
<b class="counter" ng-if="notificationCounter">Problem</b>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>