Add frosting/blur effect to Bootstrap 3 fixed navbar

Question

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.

What I am looking for:

http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c

-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;

I am using this setup for bootstrap:

http://getbootstrap.com/examples/jumbotron/

Please let me know if you have any questions.

Thank you.

Answer 1

Use backdrop-filter: blur(10px);

For more info see: My Github Repo for adding frosty effect to Bootstrap navbar

Answer 2

Here is a quick bootply http://www.bootply.com/BYInEV4LVu

Adding that blur code you posted to the navbar will blur everything in it, so what you want to do is to set the background of the nav to be semitransparent and give it a z-index to keep it on top. Then add another bar beneath the #navbar and position it the same as the .navbar but underneath it using z-index. Below is where the extra blur div should go and the blur code. html

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid the-navbar">
        <div class="navbar-header"> ... </div>
        <div id="navbar" class="navbar-collapse collapse"> ... </div><!--/.nav-collapse -->
        <div class="the-blur"></div>
    </div>
</nav>

.the-blur {
    position: fixed;
    top:0;
    width: 100%;
    min-height: 50px;
    margin-bottom: 20px;
    background: rgba(0,0,0,.4);
    z-index:1010;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}