title: Bootstrap 3 collapsed menu is displaying behind rendered body
body: <p>I'm building my first Bootstrap 3 site beginning with the MetroMan Bootstrap Template, and following a Pluralsight Tutorial. I am having difficulty with one specific behavior in which the menu is displaying behing other elements in the body. As the site width is reduced beyond the iPad level, the navigation becomes a dropdown menu as expected, but that menu is displaying behind the (at)RenderBody(). This behavior does not happen at any other spot in the site as the width is reduced.</p>
  
  <p>Here is the relevant section of the _Layout.cshtml</p>
  
  <pre><code>    &lt;header&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
          &lt;!-- Logo starts --&gt;
          &lt;div class="logo"&gt;
          &lt;a href="~/Home/index"&gt;&lt;img src="../Content/Templates/img/DJGLogo250.png" alt="Author Logo" class="navbar-brand" /&gt;&lt;/a&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Logo ends --&gt;
      &lt;/div&gt;
      &lt;div class="col-md-9 col-sm-8"&gt;
          &lt;!-- Navbar starts --&gt;
          &lt;div class="navi pull-right"&gt;
          &lt;div id="ddtopmenubar" class="mattblackmenu"&gt;
              &lt;!-- Main navigation --&gt;
              &lt;!-- Use the background color class in anchor tag for colorful menu --&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="~/Home/Index" class="blightblue"&gt; &lt;i class="icon-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
              &lt;!-- Main navigation --&gt;
              &lt;li&gt;
                  &lt;a href="#" rel="ddsubmenu2" class="bred"&gt; &lt;i class="icon-book"&gt;&lt;/i&gt; Author&lt;/a&gt;
                  &lt;!-- Sub Navigation --&gt;
                  &lt;ul id="ddsubmenu2" class="ddsubmenustyle"&gt;
                  &lt;li&gt;&lt;a href="~/Home/About"&gt;About Damon&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/Home/AskTheAuthor"&gt;Ask Damon&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/Home/Speaking"&gt;Speaking Engagements&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/Home/Books"&gt;Books&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#" rel="ddsubmenu2" class="bviolet"&gt; &lt;i class="icon-comments"&gt;&lt;/i&gt; Interact&lt;/a&gt;
                  &lt;!-- Sub Navigation --&gt;
                  &lt;ul id="ddsubmenu2" class="ddsubmenustyle"&gt;
                  &lt;li&gt;&lt;a href="~/News/News"&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/Blog/Blog?curpos=0"&gt;Long-View Living (Blog)&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/BookEngagement/BookEngagement"&gt;Book an Engagement&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#" rel="ddsubmenu2" class="bgreen"&gt; &lt;i class="icon-bookmark"&gt;&lt;/i&gt; Extras&lt;/a&gt;
                  &lt;!-- Sub navigation --&gt;
                  &lt;ul id="ddsubmenu2" class="ddsubmenustyle"&gt;
                  &lt;li&gt;&lt;a href="~/RecommendedReading/RecommendedReading"&gt;Recommended Reading&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="~/Home/StudyTips"&gt;Bible Study Tips&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="~/Contact/Contact" class="bblue"&gt; &lt;i class="icon-envelope-alt"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="navis"&gt;&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;!-- Header ends --&gt;
  
  
      @RenderBody()
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dh5XJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dh5XJ.png" alt="Resulst on iPhone 6s"></a></p>
  
  <p>If you look on the left side, just above the blue sky, that sliver of white is the menu.  I was able to get the menu to display on top of the renderbody by setting z-index values on the CSS styles that drive the two elements.  It's an ugly hack but it did work. </p>
  
  <p>Here are those two sections of the code style.css.</p>
  
  <pre><code>    .navis select{
      display:none;
      z-index:300;
  }
  
   /* Parallax Slider */
  
  .da-slider{
      margin-bottom: 0px;
      border-top: 3px solid #eee;
      border-bottom: 3px solid #eee;
      z-index:-1;
  }
  </code></pre>
  
  <p>There has to be something simple that I am missing - something that will allow these two elements to display one after the other rather than one atop the other.
  Any suggestions?</p>