Is there a way to achieve a blurred background on a bootstrap 4 navbar?
I've attempted using the CSS blur filter, but it ends up blurring all the content within the div as well. Some people have resorted to using SVG to blur whatever is behind the div, similar to photoshop masks, but this doesn't work for me since I need a fixed-top navbar that scrolls with the browser throughout the entire page.
Therefore, I am looking for a CSS effect that can be applied to this navbar to give the appearance of blurring whatever is behind it.
{# Navbar #}
<nav id="home-navbar" class="navbar fixed-top navbar-expand-lg navbar-light mx-0 mx-md-auto" style="background-color: #ffffffcc; z-index: 3; max-width: 1140px;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-auto" href="#"><img src="{{ asset('img/logo-menu.png', 'theme') }}" style="max-height: 66px;"></a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto my-4 my-lg-0" style="padding: 0;">
<a class="nav-item nav-link" href="#">{{ l('hotel') }}</a>
<a class="nav-item nav-link" href="#"</a>
<a class="nav-item nav-link" href="#">{{ l('restaurantes') }}</a>
<a class="nav-item nav-link" href="#">{{ l('galeria') }}</a>
<a class="nav-item nav-link" href="#">{{ l('promocoes') }}</a>
<a class="nav-item nav-link" href="#">{{ l('contato') }}</a>
</div>
</div>
</nav>