Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position Twitter Bootstrap framework topbar to stay at top of page

So, I'm playing around with Twitter's new CSS framework, Bootstrap.

What I'm encountering is as follows: I've added the topbar div to my page:

<div class="topbar">
      <div class="fill">
        <div class="container">
          <h3><a href="#">Project Name</a></h3>
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search">
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
              <a href="#" class="menu">Dropdown</a>
              <ul class="menu-dropdown">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
   </div>

However, this has some un-expected behavior: It proceeds to float down the page at the top - example here.

Is there a way to prevent that from happening, or do I need to consider a different framework?

like image 894
jrg Avatar asked Aug 27 '11 11:08

jrg


2 Answers

You mean the top bar is always to the top? That is the inteded behaviour.

You can change it by removing

position: fixed

in topbar's CSS definition.

like image 160
Pekka Avatar answered Nov 01 '22 21:11

Pekka


from http://twitter.github.com/bootstrap/components.html#navbar

To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

<div class="navbar navbar-fixed-top">
  ...
</div>
like image 20
Tzury Bar Yochay Avatar answered Nov 01 '22 20:11

Tzury Bar Yochay