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.