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 above it. It will be cool if navbar is alway there in case of scrolling, but it is better for banner to disappear.

How can I achieve that, any examples?

Answer 1

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.