I am trying to create a fixed top navigation bar similar to Udemy using bootstrap 3. This contains a left-aligned resettable finger. But copying navbar-headerfailed twice. CSS is not my forte. Any direction is appreciated.

Curled one to the left and one to the right.

Update
This is what I still have. I would like the button group elements to accept the default bootstrap behavior (with an icon) on the left in the very corner of the navigation bar when resizing for smaller displays.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<header class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<div class="btn-group header-dropdown nav navbar-nav">
<button type="button" class="btn btn-success">Select City</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Chennai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Mumbai</a></li>
<li class="divider"></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</header>
</nav>
source
share