Disable Bootstrap 3 navbar going 2 rows in medium viewport size

Question

My Bootstrap 3 navbar is 1 row on a large viewport. Then when I start to shrink the browser window, it switches to 2 row, where the right content ("Hello username", "Log off") is in the second row.

Then after more resize, it becomes 1 row again with the menu items disappeared and the menu button present only.

How can I skip the 2 row phase?

Answer 1

For what it is worth, here is an idea that makes the navbar items morph from text to an icon based on the current responsive size.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li> 

The result is the 'Contact' text converts into a plus icon at small size. Here's a bootply example