Placing content / banner over "Fixed top navigator"

Question

I want to place a banner on the fixed top bar of the Bootstrap navigator. My goal is to use navigation as a navigation for operations and put an inscription above it on the project. It will be great if navbar is always there in case of scrolling, but it is better that the banner disappears.

How can I achieve this, any examples?

Answer 1

The trick is to use affix , and you do not have to place 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> 

View the demo at boot 3.1.1 .

Answer 2

In response to the Skelly solution, I would not recommend using the bootstrap system grid to style your header. The reason is that on mobile devices this will create unnecessary line breaks or undesired distance even when using "hidden-sm". You can see this when you bring the right element closer to the left element in your browser.

Use .. "nav-header" instead

  <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>