title: Creating a Bootstrap navbar collapse overlay menu
body: <p>I am trying to get an overlay menu when the user clicks on the burger menu it takes up the whole screen, Something like this :</p>
  
  <p><a href="https://i.stack.imgur.com/IjWsK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IjWsK.png" alt="enter image description here"></a></p>
  
  <p>I for some reason cant seem to get it to work at all , i have tried to use examples but it might be because i am not that experienced with bootstrap but it wont overlay the menu at all. </p>
  
  <p>So i have set it up so the burger menu appears at 991px using media queries and it works fine but getting the overlay to pop up is not happening at all. </p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-default navbar-fixed-top" id="section1"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"&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;/button&gt;
          &lt;a class="navbar-brand"&gt;&lt;img alt="" src="Images/logo.png" class="img-responsive"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;
              &lt;a href="#section1"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#section2"&gt;About Me&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#section3"&gt;Game&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#section4"&gt;Me&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#section5"&gt;Hobbies&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#section6"&gt;Contact Me&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-nav-content"&gt;
        &lt;div class="modal-nav-body"&gt;
          &lt;ul&gt;
            &lt;li&gt;Brand&lt;/li&gt;
            &lt;li&gt;About Me&lt;/li&gt;
            &lt;li&gt;Game&lt;/li&gt;
            &lt;li&gt;Hobbies&lt;/li&gt;
             &lt;li&gt;Contact Me&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media only screen and (max-width: 991px) {
    .navbar-header {
      float: none;
    }
    .navbar-left, .navbar-right {
      float: none !important;
    }
    .navbar-toggle {
      display: block;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top {
      top: 0;
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
    }
    .navbar-nav&gt;li {
      float: none;
    }
    .navbar-nav&gt;li&gt;a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  
    .modal-nav-content {
    width: 100%;
    height: auto;
  }
  
  .modal-nav-body {
    margin-top: 100px; 
  }
  
  .modal-nav-body ul {
    list-style-type: none;
    color: white;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  .modal-nav-body ul li {
    text-align: center;
    font-size: 130%;
    padding: 8px;
    text-transform: uppercase;
  }
  }
  </code></pre>
  
  <p>You can see the full code here : <a href="https://jsfiddle.net/DTcHh/38740/" rel="nofollow noreferrer">Fiddle Link</a></p>
  
  <p>No idea why its not working but i am guessing its something to do with me not using bootstrap correctly , </p>
  
  <p>Thanks again for all the help </p>