css - Twitter Bootstrap Navbar: How to create two separate rows?

Question

I am using Twitter bootstrap to create my fixed navbar up top, and I wanted to mimic something like Kickstarter's navbar, where they create a new line in between 'Discover' and 'great projects.' I've tried using an escape "\n" as well as "< br />" (i realize there's a space in front of br) to create a new line, but it messes up the format of the rest of the navbar, and pushes the logo up. What would be the correct way to create 2 lines, but maintaining the overall height of the navbar?

Answer 1

<ul class="nav">
  <li>
    <a href="#">
      <span class="li-head">Discover</span>
      <span class="li-tail">great projects</span>
    </a>
  </li>
</ul>

.nav li a > span { display:block; }