Increase main page opacity / darkness when sidebar is open

2
The layout I’m using for a new mobile app has a left toggle menu that slides over the page content.  My question is how can I increase the background opacity or darkness for the page that is being overlaid by the toggle menu much like when a modal is active?
asked
2 answers
3

Good idea, something like this works…

.mx-scrollcontainer-slide.mx-scrollcontainer-open
.region-sidebar>.mx-layoutcontainer-wrapper
{
  background:#FFFFFF!important;
  opacity:1.0;
  z-index:3;
}
.mx-scrollcontainer-slide.mx-scrollcontainer-open
.region-sidebar:before{
  content:' ';
  width:100%;
  height:100%;
  position:fixed;
  background:rgba(0,0,0,0.5);
  z-index:1;
}

 

answered
0

Andrew, I’m not sure if I correctly understand your question. Do you want the layout (toggle menu) to be transparent or the page (content) under the layout?

answered