Navigation with Bootstrap - html

Question

I created a navbar with Twitter-Bootstrap but I'm having trouble with my navigation.
I want to create navigation where nav is on the left and my logo on the right. I created the .nav-head-middle div with vertical-align:middle; and display:inline-block; so that my navigation and logo are on the same line (i.e. the middle).
My navigation and logo are on the same line but my problem is that my logo isn't on the right.
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="nav-head-middle">
<ul class="nav navbar-nav nav-adelva">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
</div>
<div class="nav-head-middle">
<div class="navbar-right">
<img src="image/logo.png" />
</div>
</div>
</div> <!--/container -->
</div> <!--/navbar -->
CSS
.nav-head-middle{
display:inline-block;
vertical-align:middle;
}

Answer 1

Your problem could reside in not specifying the first set of navigation tabs to float left.
In CSS you need to tell the parts on the left to "go left" and the parts on the right to "go right".
In your case, with using bootstrap, you should utilize the built in code as apposed to creating extra custom CSS. The build in classes that should help are "navbar-left" and "navbar-right".
Not sure if this HTML will work for you or if it will help clarify your troubles, but I would think the html code should look closer to this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-navtabs navbar-left">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
<ul class="nav nav-tabs navbar-right">
<li><img src="image/logo.png" /></li>
</ul>
</div> <!--/container -->
</div> <!--/navbar -->