Adding a header image before navbar-fixed-top

Question

How do I add a header image so that it will appear on top of a navbar-fixed-top. And as the user scrolls down the navbar will stick to the top?

I have tried adding it to

Answer 1

JsFiddle with scrolling nav check link

Note: Incase your image is smaller than screen size,insert this snippet inside your css

.masthead img{
width:100%;
 }

The html should look like the following :

<div class="masthead">
<img src="http://placehold.it/940x150"/>
</div>
<!-- /container -->
<div class="navbar affix-top" data-spy="affix" data-offset-top="150">
<div class="navbar-inner">
    <div class="container">
               <ul class="nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
    </ul>
    </div>
   </div>
 </div>
 <!-- navbar -->
<div class="container">
  <div class="row-fluid">
    <div class="span4">
    content goes here 
    </div>
   </div>
 </div>