Как разместить div под навигационной панелью

Question

Мне нужно разместить div под моей верхней навигационной панелью, которая не должна прокручиваться вместе с содержимым страницы, как навигация.

Я попытался создать его как второй навигатор, но он все еще прокручивается или создает пустую область над двумя навигаторами.

Как это сделать?

UPDATE

В этом примере зеленая полоса находится на верхней части навигационной панели, но мне нужно, чтобы остаться ниже навигационной панели: http://jsfiddle.net/julianonunes/y8YqK/

Если переместить зеленый штрих-код (код образца ниже) перед навигацией, он скрыт на навигационной панели.

Ex:

<div class="navbar navbar-decoration navbar-fixed-top"></div> 
<div class="navbar navbar-default navbar-remote navbar-fixed-top"> 
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a> 

    </div> 
</div> 

Answer 1

Ok. Проблема заключается в том, что ваш второй div включает «navbar-fixed-top», который склеивает его в верхней части экрана. Вы не хотите, чтобы это было исправлено на вершине - вы просто хотите, чтобы она была зафиксирована на месте ниже основного навигатора. Измените HTML для второго пилить на:

<div class="navbar navbar-default navbar-remote navbar-decoration "> 

И добавить к вашему Navbar-украшение класса:

width: 100% 
position: fixed; 

Answer 2

Возможно, вы пробовали это уже, но в CSS для второй навигационной панели поставил

position: fixed; 

Если вы не хотите, чтобы добавить в таблицу стилей, вы можете положить его в DIV, как это:

<div style="position: fixed;"> </div> 

Я не уверен, но вы можете также добавить дисплей: блок, как это:

<div style="position: fixed; display: block;"> </div> 

С Bootstrap, используйте эту логику в их HTML/CSS:

<div class="navbar" style="position: fixed; display: block;"> 
    <div class="navbar-inner"> 
    <a class="brand" href="#">Title</a> 
    <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 class="navbar" style="margin-top: 10px;"> 
    <div class="navbar-inner"> 
    <a class="brand" href="#">Title</a> 
    <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> 

Надежда одна из этих работ.

Answer 3

Я получил это фиксированным, добавив Верхнее поле на вторую навигационную панель с NAVBAR- фиксированные сверху.

<div class="navbar navbar-default navbar-remote navbar-fixed-top"> 
    <div class="navbar-header"> <a href="#" class="navbar-brand">Brand</a> 

    </div> 
</div> 
<div class="navbar navbar-decoration navbar-fixed-top"></div> 

CSS

.navbar-decoration { 
    margin-top: 50px; 
    min-height: 5px; 
    max-height: 5px; 
/* ... */ 
}