Twitter Bootstrap - right navbar

Question

I look at http://getbootstrap.com/components/#navbar and it has exactly the kind of navbar I want. Aligned on the right, automatically collapsing and opening.

I look at the code of that page, and I see that it is including

<script src="../assets/js/docs.min.js"></script>

Which I am guessing is not part of bootstrap but their use of bootstrap. Or is there a bootstrap component that isolates that part of the behavior?

In particular I am interested in the right navbar illustrated in the image below. Notice in the real site how the sections collapse and expand nicely and automatically? enter image description here

score 1 · Answer 1 · edited May 07 '15 at 14:22

You just have to include the proper CSS & files. Here you have a isolated navbar working: http://jsfiddle.net/P3V9P/

Follow these steps: http://getbootstrap.com/getting-started/#download add include jQuery too.

At header:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

At body:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Thanks! But it doesn't quite do what I am looking for, but I am sure you can help me figure it out! I am adding a specific screenshot to the OP — pitosalas, Feb 12 '14 at 00:51
The link you provided points to the navbar component of bootstrap so its confusing. Magic for collapsing/opening is meda with scroll-spy.See http://stackoverflow.com/questions/13134013/how-to-use-bootstrap-scroll-spy. Style for the side-navbar at "docs.min.css" and it class is "bs-sidebar" — Mardie, Feb 12 '14 at 01:07
What you are asking for is actually called "affix" the thing that expands on scroll and the screenshot of which you have attached. If you just go to the link http://getbootstrap.com/javascript/#affix you'll see the entire documentation on it! — Parth, Dec 25 '14 at 05:23

Twitter Bootstrap - right navbar

1 Answers1