title: Why does my twitter bootstrap navbar keeps moving about?
body: <p>How do i stop my twitter bootstrap navbar from moving up and down or even behind my image button when i reduce my browser size? The bootstrap CSS file is the latest one i have downloaded.</p>
  
  <p>Initially my previous navbar i created myself was able to be fixed onto one position which managed to overlap my other picture.</p>
  
  <p>The code below is my own navbar which i created ( NOT MY TWITTER BOOTSTRAP css code ). Bootstrap CSS code are pretty standardized and can be downloaded</p>
  
  <pre><code>#nav {
  background: #292929;
  background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
  position:absolute;
  left:0%;
  top:10%;
  margin: 0px;
  padding: 0;
  border: 1px yellow;
  border-bottom: none;
  width:100%;
  }
  </code></pre>
  
  <p>Unfortunately, this is the otherwise for my twitter bootstrap.
  I'm new to twitter bootstrap so i'm quite confused when i went to see their CSS. I tried changing the position to fixed but it's still the same.</p>
  
  <p><em><strong>UPDATE</em></strong></p>
  
  <p>I'm able to let my twitterbootstrap navbar overlap my slideshow image and imagebutton by encasing it with another </p>
  
  <pre><code>&lt;div id="overalltwitternavbar"&gt;
  &lt;div class="navbar navbar-inverse navbar-static-top"&gt;
  &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="brand" href="#"&gt;iPolice&lt;/a&gt;
          &lt;div class="nav-collapse"&gt;
              &lt;ul class="nav"&gt;
                  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Login.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>This is my css for the encasing div</p>
  
  <pre><code>#overalltwitternavbar {
  position:relative;
  
  }
  </code></pre>
  
  <p>However, I'm still unable to force the navbar to fixed into a position and just collapse the menu accordingly.</p>