I am working on a Bootstrap navbar that displays properly in most screen layouts, but I am having trouble getting it to show on one line in the xs layout. Even though there is enough room for it to fit on one line, it keeps breaking up into multiple lines. How can I make sure it stays on one line without breaking?
https://i.sstatic.net/6FMmT.png
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active"><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Settings 1</a></li>
<li><a href="#">Settings 2</a></li>
<li><a href="#">Settings 3</a></li>
<li class="divider"></li>
<li><a href="#">Settings A</a></li>
<li><a href="#">Settings B</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="divider"></li>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"><a href="#"></a></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>