title: How to achieve a blur effect on navbar?
body: <p>I want to make a blur effect in the background of a navbar component.
  If I use a normal blur effect that exist on CSS core, it will not work like I want, so I want some help with this.</p>
  
  <p>Examples:
  <a href="https://i.stack.imgur.com/bPEXZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bPEXZ.png" alt="enter image description here"></a></p>
  
  <p>Onthe first image, the panel section on the bottom has some "transparent background", but it is not opacity.
  On the right side there is a navbar with that blur effect.
  I tried to use  CSS blur effect but it makes the menu items not readable.</p>