[Resolved] Styling the off Canvas Panel

[g_younes]

I have my off Canvas Panel enabled on Desktop only, and it is set to slide (I am using it as a way to have a vertical navigation menu).
When it appears, the site in the background gets really shadowed (which makes sense), but in this case, I don’t want it to be that shadowed (I want the overlay to remain there but have less opacity = be more transparent).
I can’t find the off-canvas section in the .css file to adjust it (maybe it’s a JS function?).
It will be really helpful if you can point in the right direction.
Also, I want to edit the canvas ‘menu’ itself (I want to adjust its overall width). So if you could tell me where that is in the .css (or give me some code) it would be great too.

Thank You 🙂

[Tom]

Hi there,

Give this a shot:

.slideout-overlay {
    background-color: rgba(0,0,0,0.5);
}

As for the width, this might help: https://generatepress.com/forums/topic/off-canvas-width/

Let me know 🙂

[g_younes]

Thank you! Both solutions worked beautifully.

[Tom]

You’re welcome 🙂

[Author]

Posts