Question

130

Add frosting/blur effect to Bootstrap 3 fixed navbar

rated 0 times [ 135] [ 5] / answers: 1 / hits: 24004 / 10 Years ago, tue, january 6, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

prestonh

Add To Favorites

Follow

Total Points: 384

Total Questions: 105

Total Answers: 105

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

answered 10 Years ago kieraelsies · Accepted Answer

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);

}