Umieszczanie zawartości/baneru nad "Naprawionym górnym paskiem nawigacji"

Question

Chcę umieścić baner na stałym pasku nawigacyjnym z Bootstrap. Moim celem jest wykorzystanie nawigacji jako nawigacji dla operacji i umieszczenie nad nią banera projektu. Będzie fajnie, jeśli w przypadku przewijania pasek nawigacji znajdzie się w tym miejscu, ale lepiej, żeby baner zniknął.

Jak mogę to osiągnąć, wszelkie przykłady?

Answer 1

W odpowiedzi na rozwiązanie Skelly, nie polecam używania systemu gridowego bootstrap do stylu nagłówka. Powodem jest to, że na urządzeniach mobilnych spowoduje to niepotrzebną separację linii lub niepożądane odstępy, nawet przy użyciu "ukrytego-sm". Możesz to zobaczyć, gdy zbliżasz właściwy element do lewego elementu w przeglądarce.

Zamiast używać .. "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

Sztuką jest w użyciu affix, a wtedy nie koniecznie umieścić banner w <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> 

Zapoznaj się z demo in bootstrap 3.1.1.