Off-Canvas Menu

Hi there,

try adding this CSS:

div.slideout-overlay {
    left: 264px;
}
#generate-slideout-menu.main-navigation {
    background-color: transparent;
}
#generate-slideout-menu:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

It will make the background transparent, and add a little blur ( where supported ) to the content behind the off canvas.

Hi David,

Thanks for the very fast response time.

I added the code above to Simple Custom CSS,
but no change.

Do I need to make some kind of
change or tick something off in the
off-camvas menu?

John

Try clearing the browser cache - as its working for me:

https://www.screencast.com/t/aDW9tpfqvt

Yes, it is does work, David.
Perfectly. And beautifully.

I did not recognize it as transparent
on my wide screen Mac because there is
nothing but white space on the left
hand side of the screen. :-)

But on my iPhone it looks great.
You do great work, David !

John

Thank you :) It was Apple inspired, i like the transparent blur they use.

Glad to be of help

Oh, Apple started it.
I find it very elegant.

Me too :)

One definition of elegance:
"scientific precision, neatness, and simplicity" (Merriam Webster).

I believe very strongly in this.
See a great video about Dieter Rams' Ten Principles of Design:
https://www.youtube.com/watch?v=wChkvofR7Q0

"Weniger, aber besser" :)

That's it, David.

Are you a German speaker/reader?

Oh no - my multilingual skills are 2% knowledge and 98% google translate :)

Google Translate, by the way, is exceptionally
good as long as the content uses straightforward,
clear, grammatically correct language.

I tested it this week with my content on
http://www.understand-culture.com

Presto-changeo ... near-perfect translations !