Search code examples
csstwitter-bootstraptwitter-bootstrap-2

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


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.

enter image description here


Solution

  • 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 :-(.