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

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

Answer 2

just use backdrop-filter

.navibar {
  background-color: rgba(0, 0, 0, 0.815);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: -100;
  backdrop-filter: blur(10px);
}

.navibar::after {
  content: "";
  display: table;
  clear: both;
}
.hope ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.hope li {
  display: inline-block;
  margin-left: 35px;
  margin-right: 35px;
  padding-top: 10px;
}
.hope li img {
  margin-right: 3px;
  margin-left: 3px;
}
.hope li a {
  color: rgb(158, 158, 158);
  text-decoration: none;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  transition: 0.3s;
}
.hope li a:hover {
  color: white;
  text-decoration: none;
}
.hope li a img {
  margin-bottom: -8px;
}

.hope a .o {
  margin-bottom: -7px;
}
.hope ul .pls {
  padding-left: 300px;
}
.hope ul .plss {
  padding-right: 350px;
}

<header class="navibar">
      <div class="navi">
        <nav class="hope">
          <ul>
            <li><a href="https://www.youtube.com/channel/UCGWBCRLJph7pEByaL5Un9tQ"><img src="Images/Screenshot 2021-07-15 173623-modified.png" width="28" height="28">Subscribe!</a></li>
            <li><a href="https://discord.gg/9cCuPzHwN7">Discord Sever</a></li>
            <li><a href="mailto:mncfred1505@gmail.com">Email me</a></li>
            <li><a href="tel:+819091615828">Call me</a></li>
            <li><a href="#aboutme">About</a></li>
            <li><a href="#intro">Intro</a></li>
            <li><a href="#meme">Memes</a></li>
          </ul>
        </nav>
      </div>
    </header>

it worked for me

Answer 3

Use backdrop-filter: blur(10px);

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

Answer 4

Thanks user3365721 and arshad. I have done more research and what I am looking for can't be done without some Javascript as shown in the below example:

http://jsfiddle.net/CSS_Apprentice/WtQjY/415/

            $(function () {
                html2canvas($("body"), {
                    onrendered: function (canvas) {
                        $(".blurheader").append(canvas);
                        $("canvas").attr("id", "canvas");
                        stackBlurCanvasRGB(
                            'canvas',
                        0,
                        0,
                        $("canvas").width(),
                        $("canvas").height(),
                        20);
                    }
                });
                vv = setTimeout(function () {
                    $("header").show();
                    clearTimeout(vv);
                }, 200);
            });

            $(window).scroll(function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });

            window.onresize = function () {
                $("canvas").width($(window).width());
            };

            $(document).bind('touchmove', function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });

            $(document).bind('touchend', function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });

*** You will see here that the text and everything behind the menubar is blurred not jus the bar. That is where I was having trouble.

I just need to apply this now to Bootstraps framework and classes.

Thank you for all your time though you helped confirm to me that I was doing it right but need to

Answer 5

You said you want the effect(as in the example) in the navbar. You can just give a transparent background color to your navbar.

Demo

CSS:

.navbar{
 background:rgba(255,255,255,0.6);
}