How do I make a navigation bar in bootstrap that inline displays nav items left, center and right?

Question

See the HTML code for the navigation bar below.

<header>
    <div class="navbar navbar-fixed-top center">
        <div class="navbar-inner">
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">item 1</a><li>
                    <li><a href="#">item 2</a><li>
                    <li><a href="#">item 3</a><li>
                    <li class="active"><a href="#">item 4</a><li>
                </ul>
                <ul class="brand">
                    <li><p>logo text</p></li>
                </ul>
                <ul class="budget">
                    <li><p>item on right</p></li>
                </ul>
            </div>
        </div>  
    </div>
</header>

I used the following CSS to center the brand logo. This works fine.

.navbar .brand {
margin-left: auto;
margin-right: auto;
width: 100px;
float: none;
list-style: none;}

.center .navbar-inner {
text-align:center;}

I got stuck on how to make the item on the right (with the class "budget") move towards the right. I already tried using the navbar-right bootstrap class but this didn't work. I also tried to adjust the CSS I used to center the logo but somehow the item I want to align right keeps showing up centered and below the navigation bar. Somebody can tell me how I can display this item inline on the right?

Thanks in advance,

Stijn

Answer 1

Since your navbar html markup is a bit messy, I decided to make a clean one for your purpose.

Basically I just added one CSS class and got rid of yours.

.nav.nav-center {
    margin:0 auto;
    display: inline-block;
    float:none;
}

And here your adapted HTML

<header>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>      
    </div>

    <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-center brand">
        <li><p>logo text</p></li>
      </ul>
      <ul class="nav navbar-nav navbar-right budget">
        <li><p>item on right</p></li>

      </ul>      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

UPDATE

If you want to have items on the left as well, you have to change the HTML markup and put the brand element as last between the two floats, like this:

<header>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>      
    </div>

    <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav pull-left">
        <li><p>Left Content1</p></li>
        <li><p>Left Content1</p></li>
      </ul>      
      <ul class="nav navbar-nav navbar-right budget">
        <li><p>item on right</p></li>
      </ul>            
      <div class="nav-center brand">logo text</div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

And change the CSS class to this:

.nav-center {
   position: absolute;
   margin-left: 47%;    
}

After you finished entering your content, play with the margin-left percentage until it fits.

Also read this question for further information on your issue: centering a div between one that's floated right and one that's floated left

Working example