user3026519 user3026519 - 29 days ago 9
CSS Question

How to place a fixed div above twitter bootstrap nav menu

I want to place a div above twitter bootstrap navigation menu, Intro is the div that i want to display above menu which must be fixed. The issue is i have placed background image on the menu, but it shows background image on the Intro div also, i want to display background image after the Intro div. Please help to solve my issue. Thanks...

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

Answer

Move <div id="Intro">above the navbar code:

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

Add some space on top of navbar-fixed:

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

Make this size the height you want for <div id="Intro">

Add additional styling to <div id="Intro">

#Intro {
  top: 0;
  position: fixed;

EDITED: Additional styling for intro div. Add some dimensions and background color to intro div. Try this :

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

}

Comments