SO http://is.gd/WaQaRx

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<body>
    <div class="navbar">
        <div class="container">
            <div class="navbar-inner">
                <button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button> <a class="brand" href="#"><img class="pull-left "src="img/logo.png" /></a>

                <!--<a class="navbar-brand pull-left" href="#"><img class="pull-left "src="img/logo.png" /></a>-->
                <div class="nav-collapse collapse">
                    <ul class="nav nav-pills pull-right ">
                        <li class="active"><a href="#">Home</a>
                        </li>
                        <li><a href="#">Bikes</a>
                        </li>
                        <li><a href="#">About</a>
                        </li>
                        <li><a href="#">Store</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Navbar example</h1>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs »</a>

        </p>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

CSS

/*nav styles*/
.navbar{
    background:none;
}
.nav{
    margin-top:77px;
    margin-right:5%;
}

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar .nav  li{
    padding-left: 5px;
    font-weight: bold;
    text-transform: uppercase;
}
.navbar .nav  li a{
    background-color: #00AFE7;
    color: #000;
    -webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}

.navbar .nav li  a:focus,
.navbar .nav  li  a:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #000; 
    -webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}