How to have two navbars, one only 50% width and centered?

Question

I created a page with bootstrap 2.3.2 with 2 navbars.

navbar 1 is in original bootstrap-style and full-width --> no problem.

navbar 2 is

1. custom style --> solved.
2. about 50% of the width and centered

Problem:

Can't get the width to 50% and can't get it centered.

I tried adding span6 offset3 to the <div class="navbar"> --> still full width. Adding the classes to the parent-div made no difference either.

This is my simplified HTML:

<h3>two navbars, different styles</h3>

<!-- navbar one: full width -->
<div class="navbar">
  <div class="navbar-inner">
      <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

<!-- navbar two: custom styling, 50% width, centered -->
<div class="container navbartwo">
    <div class="span6 offset3 navbar"> <!-- Problem here -->
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>
</div>

Here's a JSFiddle: http://jsfiddle.net/michi001/byk64qr3/1/

Answer 1

You're almost right, but container class adds margin, so:

CSS

.navbar-snd {
  width: 50%;
  margin: 0 auto;
}

HTML

<h3>two navbars, different styles</h3>

<!-- navbar one: full width -->
<div class="navbar">
  <div class="navbar-inner">
      <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

<!-- navbar two: custom styling, 50% width, centered -->
    <div class="navbar navbar-snd"> <!-- Problem here -->
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>

Update: Here's a fiddle (from the last version): http://jsfiddle.net/byk64qr3/5/