I am not able to align the logo and the nav bar inside the container div. The navigation bar is always below the level of the image logo. I have tried some html align attributes but it did not fix the issue. I am using bootstrap CSS, so should I change something in there ?
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--company logo and slogan-->
<img src="img/logo.png" alt="logo" />
<!--button for responsive navigation-->
...
<!--Nav bar-->
<div class="nav-collapse collapse">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
You could try to float left your img and your div tag as follow :
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="overflow: auto; ">
<!--company logo and slogan-->
<img src="img/logo.png" style="float: left; " alt="logo" />
<!--Nav bar-->
<div class="nav-collapse collapse" style="float: left; ">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
</header>
That should make them show at the same level.