title: Bootstrap + Mobile Menu Overlay
body: <p>I have a page that uses Bootstrap 3. In this page, I have a navbar that's defined like the following:</p>
  
  <pre><code>&lt;nav class="navbar" style="background-color:orange;"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="color:#000 !important;"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar" style="color:#000;"&gt;&lt;/span&gt;
          &lt;span class="icon-bar" style="color:#000;"&gt;&lt;/span&gt;
          &lt;span class="icon-bar" style="color:#000;"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="/home" class="dropdown-toggle navbar-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
            Home &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="/help"&gt;help&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/help"&gt;contact&lt;/a&gt;&lt;/li&gt;            
           &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="navbar-right"&gt;
          &lt;div class="visible-xs"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-xs-6"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;2016&lt;/a&gt;
                &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="_blank"&gt;Q1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q4&lt;/a&gt;&lt;/li&gt;                
                &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-6"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;2017&lt;/a&gt;
                &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="_blank"&gt;Q1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q4&lt;/a&gt;&lt;/li&gt;                
                &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="hidden-xs"&gt;
           &lt;ul class="nav navbar-nav"&gt;
             &lt;li&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;2016&lt;/a&gt;
                &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="_blank"&gt;Q1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q4&lt;/a&gt;&lt;/li&gt;                
                &lt;/ul&gt;
             &lt;/li&gt;
  
             &lt;li&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;2017&lt;/a&gt;
                &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="_blank"&gt;Q1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;Q4&lt;/a&gt;&lt;/li&gt;                
                &lt;/ul&gt;             
             &lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The navbar looks and works like I want on bigger screens. But on mobile, it doesn't work correctly. As you can see in this <a href="http://www.bootply.com/sxsiSwAtdb#" rel="nofollow noreferrer">Bootply</a>, the nav menu pushes the main content (the Lorem Ipsum) down. However, I want the nav menu to appear on top of the content, so that the mobile nav appears on top of the Lorem Ipsum stuff. What am I doing wrong?</p>