Is there a pull-down class for navbar in Twitter Bootstrap 2.3.2?

Question

There are pull-right and pull-left classes to align block elements. I'm wondering if there is corresponding pull-top and pull-bottom workable for navbar?

<header id="navbar" role="banner" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <a class="logo pull-left" href="/" title="Home">
        <img src="logo.png" alt="Home">
      </a>

      <div class="nav-collapse collapse">
        <nav role="navigation">
          <ul class="menu nav">
            <li>...</li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

To goal is to align the menu (ul.nav) to the bottom of navbar.

Raptor

Answer 1

The answer to this really lies in the capabilities of CSS. .pull-right and .pull-left both apply a micro-clearfix and then float the element left or right in Twitter Bootstrap.

Creating .pull-top and .pull-bottom class' would not be feasible as the parent elements would need to have a position:relative applied, the element would then need man-handled around with top and bottom properties to have it placed properly. The alternatives would require the element to have a fixed height with negative margin applied to the top, of half the height and top:50% applied. Again this would need the parent to be position:relative.

As with any CSS framework, there are just some things you will have to do yourself :-(.

Seko

Thanks for this detailed explanation. Then, I should google some manual CSS way to do pull-down right? If I can make the parent element position:relative, what possible solutions I can use to create my own pull-down? – Raptor

well in your example, give the container and the ul a position:relative. You would then need to play around with bottom and top properties. creating a pull-down class is not going to be possible. The values of top and bottom will change in each case. – Seko