Putting a Twitter Bootstrap progress bar inside a navbar

twitter-bootstrap

Solution

I know it's dirty, but what about this:

http://jsfiddle.net/m5Lkk/9/

<div class="container">
    <div class="navbar navbar-static-top">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#"><i class="icon-play"></i></a></li>
                <li><a href="#"><i class="icon-stop"></i></a></li>
            </ul>
            <div class="nav navbar-text progress" style="width: 300px; margin-top:10px">
                <div class="bar" style="width: 30%;"></div>
            </div>
            <p class="nav navbar-text pull-right">13:37</p>
        </div>
    </div>
</div>

I've basically added a margin so it pushes it down a little.

Problem

I want to write a small music player with jPlayer and Twitter Bootstrap. For the controls I'm using a navbar component with icons as buttons, to display the position in the current song I want to use a progress bar, but when I place it inside the navbar it gets stuck on the top. So far I'm working with this code: http://jsfiddle.net/m5Lkk/1/ ``` <div class="container"> <div class="navbar navbar-static-top"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#"><i class="icon-play"></i></a></li> <li><a href="#"><i class="icon-stop"></i></a></li> </ul> <div class="nav navbar-text progress" style="width: 300px;"> <div class="bar" style="width: 30%;"></div> </div> <p class="nav navbar-text pull-right">13:37</p> </div> </div> </div> ``` Does anyone know how I get the progress bar verically centered inside the navbar?

Original source