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:
-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:
/
Please let me know if you have any questions.
Thank you.
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./examples/jumbotron/
Please let me know if you have any questions.
Thank you.
Share Improve this question asked Jan 6, 2015 at 23:19 BHCOMBHCOM 1241 gold badge2 silver badges11 bronze badges 4- Here is another good link/example: jsfiddle/CSS_Apprentice/WtQjY/415 – BHCOM Commented Jan 6, 2015 at 23:20
- Here is another one. I just cant get the content in the nav bar to not be blurry, it is blurring everything? abduzeedo./ios7-frosted-glass-effect-html-5-and-javascript – BHCOM Commented Jan 6, 2015 at 23:44
- Where is the code your using? – Macsupport Commented Jan 7, 2015 at 0:33
- Perhaps show what you have tried? – vol7ron Commented Jan 7, 2015 at 5:39
5 Answers
Reset to default 5Here is a quick bootply http://www.bootply./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);
}
Use backdrop-filter: blur(10px);
For more info see: My Github Repo for adding frosty effect to Bootstrap navbar
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/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
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./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:[email protected]">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
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);
}