[Resolved] How to Add a Glass Effect to Main Navigation Menu?

[Shahin Alam]

Hi,
I want to add a blurry glass effect and a sticky navigation menu to my website.

Screenshot below:
https://ibb.co/7p4Qg83

After so much research, I found a website – https://glassmorphism.com
But, I didn’t know, where should I add the CSS code. 🙁

Please give a guideline step-by-step.
Thanks in advance.

[Ying]

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?

[Shahin Alam]

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

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

[David]

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

[Shahin Alam]

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

https://ibb.co/r5MG2XK

[Ying]

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.

[Shahin Alam]

It’s working 🙂
David & Ying are awesome!

Thanks a ton.

[David]

Glad to hear that

[Author]

Posts