Non-collapsing bootstrap 3 dropdown menu on mobile - drop-down-menu

Question

I'm trying to get a twitter bootstrap dropdown menu to not collapse and stay on the same line when using smaller devices. Here is what it currently looks like:
I'd like for the name (in this example John Smith) to be inline with My Application text and toggle button. How would I go about accomplishing that?
Example: http://bootply.com/99326
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div 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>
<a class="navbar-brand" href="#">My Application</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i> John Smith <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>

Answer 1

DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output
I make the demo links big so you can see it.
<div class="navbar navbar-default navbar-fixed-top my-custom-nav" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="#">My Application</a>
<div class="navbar-right navbar-text cursor" data-toggle="dropdown" data-target=".user-dropdown">
<i class="fa fa-user"></i> John Smith<b class="caret"></b>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-user navbar-right">
<li class="dropdown user-dropdown">
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox<span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body {padding-top:50px;}
.cursor {cursor:pointer}
/* your going to need to fiddle with the css to make the menu consistent left padding-margin */
/* consistent left padding */
#media (max-width:767px) {
.my-custom-nav .navbar-collapse .navbar-nav > li {padding-left:15px!important;}
.my-custom-nav .user-dropdown > .dropdown-menu > li {padding-left:5px!important;}
}
Make sure you test it!