Edward Tanguay Edward Tanguay - 2 years ago 136
HTML Question

How to get Bootstrap Navbar to appear on one line in the xs layout?

I have the following Bootstrap navbar, but when it displays in the

layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.

enter image description here

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
<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 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>
<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>

<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 class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>

<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>


Answer Source

Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.

For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download