title: Add frosting/blur effect to Bootstrap 3 fixed navbar
body: <p>There are a couple examples out there for what I am looking for, one in the link below.  But I am trying to perform this effect either on a background color or image using stock Bootstrap 3 nav classes.  Is this possible do you think.  Every time I get close the whole nav is blurred rather than just the background.</p>
  
  <p>What I am looking for:</p>
  
  <p><a href="http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c" rel="nofollow">http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c</a></p>
  
  <pre><code>-webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.4;
  </code></pre>
  
  <p>I am using this setup for bootstrap:</p>
  
  <p><a href="http://getbootstrap.com/examples/jumbotron/" rel="nofollow">http://getbootstrap.com/examples/jumbotron/</a></p>
  
  <p>Please let me know if you have any questions. </p>
  
  <p>Thank you.</p>