How to make bootstrap 3 navbar not wrap - css

Question

I have a bootstrap 3 navbar.
JSFiddle
<div class="navbar navbar-inverse no-print">
<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="/portal/home/index/">Logo of Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
When the width of the window is full desktop size it is correct.
When the width of the window is smaller mobile phone size it correct.
In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.
I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.
What css do I need to achieve this?
How do I force the right navbar <ul> to not be allowed to move below the left navbar <ul>?

Answer 1

Try this...
#media (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
From: http://www.bootply.com/120951

Answer 2

By default, the navbar toggles and becomes accessible via the burger menu at viewports <= 767px...
Your best bet (something I do all the time with BS!) is to make is collapse at larger viewports. You can do this with this handy snippet of code.
#media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */
.parent-class .navbar-collapse.collapse {
display: none;
}
.parent-class .navbar-collapse.collapse.in {
display: block;
}
.parent-class .navbar-header .collapse, .navbar-toggle {
display:block;
}
.parent-class .navbar-header {
float:none;
}
}
The above is a modified version of another answer on SO from some time ago - I can't find the link to it (I have this snippet lurking on my PC as I use it often).
You'll notice I've prepended .parent-class to the selectors above, this is to ensure these styles override the default BootStrap styles which don't normally get overridden till 767px and below...

Answer 3

<ul> is a block level element
you can use all li items in single <ul>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
Or you can align right and left align both <ul> and set tab view to set 12 columns each so both <ul> look better in tab view
mostly password login etc goes to top bar in a separate div.......so it will not break menu alignment