Glass Morphism Menu

Glass Morphism Menu

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

  1. Create a menu and make it Sticky.
  2. 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.)
  3. 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

  1. Adjust your transparency and colors to your desire
  2. Copy the code you created
  3. Add it to the advanced styling tab of your sticky menu
  4. 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
Typewriter effect
READ MORE
Blog article image
Title Shine Effect
READ MORE
Blog article image
Animated Title
READ MORE
Blog article image
Pulsing CTA
READ MORE

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@kent1media.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

DONATE

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