Is it possible to create a semi-opaque overlay with 50% alpha on the content areas of my Bootstrap 3 website when the nav-stacked menu is opened, but only when viewed on a phone (@media (max-width: 767px))? Can this be achieved using CSS alone or will jQuery be necessary?
UPDATE
After receiving some helpful hints from you all, I managed to implement the following solution:
$(".navbar-toggle").click(function(){
$("<div class='overlay'></div>").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);
}