Bootstrap Navbar with Logo


<div class="container">
    <div class="row">
        <h2>Navbar with Logo - Bootstrap 2.3.2</h2>
        <p>Logo must be 150x50</p>
        <p>If you want to use a biggest logo you must change the values to:</p>
        <ul>
            <li><code>.navbar-inner{ ... }</code> - Set min-height as Your image height value + 10px</li>            
            <li><code>.navbar .nav > li > a {...}</code> - Check yourself</li>
            <li><code>.navbar .btn-navbar{...}</code> - Check the margin top to center verticaly</li>
        </ul>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="javascript:;">
            <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
            <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>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="javascript:;">Home</a></li>
                    <li><a href="javascript:;">Link</a></li>
                    <li><a href="javascript:;">Link</a></li>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                            Dropdown
                            <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">Link</a></li>
                                <li><a href="javascript:;">Link</a></li>
                                <li><a href="javascript:;">Link</a></li>
                                <li><a href="javascript:;">Link</a></li>
                            </ul>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
</div>

    .navbar-inner{
    /*height: 90px*/
    min-height: 60px
    }
.navbar .brand{
    padding: 0 10px;
}
.navbar .nav > li > a {
    padding: 20px 15px;
    /*padding: 35px 15px;*/
}
.navbar .btn-navbar {
    /*margin-right: 0px;*/
    margin-top:15px;
}
.brand img{
    margin-top: 5px
}
@media (max-width:768px) {
    .brand img{
        margin-bottom: 5px
    }
    .navbar .btn-navbar{
        /*margin-right: -15px;*/
    }
    .navbar .nav > li > a {
        padding: 10px 15px;
    }
}