Best way to apply overlay to nearly entire page?

help
1

Currently I have three elements in my layout, a header, a sidenav, and a yield.

What would be the best way to apply a transparent black overlay to everything but the sidenav when the sidenav is opened via a button? My current solution turns the brightness of the yield down to about 20%, and does something else to “dim” the header, but this seems like a very poor solution.

Ideally I’d like to apply a div to everything but the sidenav, and manipulate the overlay on that div. However, because the {{header}} and {[yield}} and {{sidenav}} are all separate elements in the layout, I’m not sure how to do this.

Any suggestions on the best way to apply an overlay to everything on the page except the sidenav?

2

You do this with CSS, it doesn’t matter which of your elements the HTML element is in, you can make that element take over the whole page. Here are some techniques: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

If I were you I would have it as a conditional element in the {{header}}.

3

Hey thanks for the response! When you say as a conditional in the header, how would you do that exactly? As in, what would the condition be? Something like “if the sidenav is open, apply overlay div?”

4

check this simple…full screen overlay