Putting content/banner above the “Fixed Top Navbar”

Question

I want to put an banner onto the fixed top navbar of the Bootstrap. My aim is using the navbar as the navigation for operations and putting a banner of the project

Answer 1

In response with Skelly's solution, I would not recommend using bootstrap's grid system to style your header. The reason being that on mobile devices this will create unnecessary line separating or unwanted spacing even with the use of "hidden-sm". You can see this as you bring the right element closer to the left element on your browser.

Instead use.. "nav-header"

  <header class="masthead">
  <div class="container">
   <div class="nav-header">
        <h1>
           <a href="#" title="scroll down for your viewing pleasure">
              Bootstrap 3 Layout Template
           </a>
           <p class="lead">Big Top Header and Fixed Sidebar</p>
        </h1>
        <div class="pull-right hidden-sm">    
          <h1>
            <a href="#"><i class="glyphicon glyphicon-user"></i>
               <i class="glyphicon glyphicon-chevron-down"></i>
            </a>
          </h1>
    </div>
  </div>
</div>
</header>

Answer 2

The trick is in using affix, and then you don't necessarily need to put the banner in the <header>.

css:

#topnavbar {
    margin: 0;
}
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

js:

$('#topnavbar').affix({
    offset: {
        top: $('#banner').height()
    }   
});

html:

<div class="container" id="banner">
  <div class="row">
      <h1> Your banner </h1>
  </div>
</div>

<nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar">
   ...
</nav>

Check out the demo in bootstrap 3.1.1.