Glass Morphism Menu

You can use your main menu or your sticky menu to add this effect

Create a menu and make it Sticky.
On your sticky menu, adjust the margins in % so it takes part of your screen (I use 24% on each side, and 24 px on the upper border to detach it from the screen.)
Adjust the layout for tablet and phone. I use 12% for tablet and 8% for phone.

Here is the final code I added to my custom CSS:

element {background: rgba(246, 182, 177, 0.45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.9px); -webkit-backdrop-filter: blur(4.9px); border: 1px solid rgba(246, 182, 177, 0.6);}

Go to This website to create your CSS code for your colors

Adjust your transparency and colors to your desire
Copy the code you created
Add it to the advanced styling tab of your sticky menu
Add "element" in front of the code and brackets around the code

Add negative margins to your Icon

This will make it pop out of the menu. remove the margins of the menu too.

Other hacks that could interest you

Blog article image

Adding Keywords to brizy cloud

Blog article image

Video as text background

Blog article image

Negative margin

Blog article image

Equal column heights

1
2
3
4
5
6
7

Any ideas or Requests

Thanks

Feel free to contact us.

if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!

If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want

Thanks a lot for your help, It's greatly appreciated !!

And feel free to ask for tutorials or tips that you would like to discover on the site