CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Quantize
Quantize

Reputation: 95

Twitter Bootstrap 3 - Navbar not horizontal

I'm fiddlin' around with bootstrap 3. I'm trying to make an horizontal navbar except it doesn't turn out horizontal. I thought the navbar should be horizontal out of the box, do I perhaps need some additional css?

I tried to make a navbar copying code from the bootstrap documentation like this:

<div class="row">
    <div class="col-12">            
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div> 
    </div>
</div>

http://jsfiddle.net/FxkZT/

Upvotes: 8

Views: 30250

Answers (2)

edsioufi
edsioufi

Reputation: 8335

DEMO

Your code is for BootStrap 2 and needs to be changed. In bootstrap 3:

  1. <a class="brand" href="#">Title</a> becomes <a class="navbar-brand" href="#">Title</a>
  2. <ul class="nav"> becomes <ul class="nav navbar-nav">
  3. No more need for <div class="navbar-inner">

More info in the doc here.

Upvotes: 20

user710031
user710031

Reputation:

http://jsfiddle.net/FxkZT/5/

I just added this little bit of CSS, check it out and let me know if it works for you:

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: top;
}

HTML:

<div class="row">
    <div class="col-12">
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>


    </div>
</div>

Upvotes: 2

Related Questions