How to Add a Glass Effect to Main Navigation Menu?

Hi there,

There's an option to activate sticky navigation in customizer:
https://docs.generatepress.com/article/sticky-navigation/

And where do you want to apply the blurry glass effect?

Can you link us to your site using the private info field?

I want to apply the blurry glass effect to my site's navigation menu bar.

Screenshot: https://ibb.co/yVCXRTj
How to do that?

Hi there,

you would add it like so:

#sticky-navigation {
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

For your design you will need to change the rgba color for the: background: rgba( 255, 255, 255, 0.25 );

And for reference you should be aware of the browser support:

https://caniuse.com/?search=-webkit-backdrop-filter

It's not working. Please check the screenshot below.

https://ibb.co/r5MG2XK

In your screenshot, the CSS before is missing 2 } at the end of it.
https://www.screencast.com/t/Ne05XoaG

Try to fix it first to see if the CSS David provided works.

It's working :)
David & Ying are awesome!

Thanks a ton.

Glad to hear that