Как разместить фиксированный div над twitter bootstrap nav menu

Я хочу разместить div над навигационным меню twitter bootstrap, Intro - это div, который я хочу отобразить над меню, которое должно быть исправлено. Проблема в том, что я поместил фоновое изображение в меню, но он также показывает фоновое изображение на вкладке "Интро", я хочу отобразить фоновое изображение после интро-div. Пожалуйста, помогите мне решить эту проблему.

<div class="navbar navbar-inverse navbar-fixed-top">
<div id="Intro">
 This is page is created with bootstrap
</div>
  <div class="container">
    <div class="navbar-header">
    </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
     <li><a href="home.aspx"> Home</a> </li>
     <li><a href="contact.aspx"> Contact</a> </li>
    </ul>
  </div>
</div>

.navbar-inverse { 
   background-color : #fffff;
   border-color:transparent;
   background: #ffffff;
   url('bgimg.gif') repeat-x;
}

Ответ 1

Переместите <div id="Intro"> над кодом навигатора:

<div id="Intro">
This is page is created with bootstrap
</div>
<div class="navbar navbar-inverse navbar-fixed-top">

Добавьте некоторое пространство поверх фиксированного navbar:

.navbar-fixed-top {
  top: 20px;

Сделайте этот размер высотой, которую вы хотите для <div id="Intro">

Добавьте дополнительный стиль в <div id="Intro">

#Intro {
  top: 0;
  position: fixed;

Редакция: Дополнительный стиль для intro div. Добавьте некоторые размеры и цвет фона в intro div. Попробуйте следующее:

 #Intro {
     top: 0;
     position: fixed;
     background-color: #fff;
     height: 40px;
     width: 100%;

  }