title: Overlay content areas in Bootstrap 3 site when responsive menu is opened
body: <p>How can I overlay the content areas of a Bootstrap 3 site with a semi opaque [50% alpha] overlay when someone opens the nav-stacked menu, only when the site is viewed on a phone [i.e. only for @media (max-width: 767px)]</p>
  
  <p>Is this even possible with CSS or will I have to use some jQuery?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks guys - you provided the clues, what I ended up doing was :</p>
  
  <pre><code>$(".navbar-toggle").click(function(){
  $("&lt;div class='overlay'&gt;&lt;/div&gt;").appendTo($(".content, .footer").css("position", "relative"));
  })
  
  // and some css
  
  /* navigation overlay */
  div.overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.5);
      }
  </code></pre>