title: Blurry background on a moving navbar
body: <p>Is there any way I can get a blurred background on a boostrap 4 navbar?</p>
  
  <p>I've tried the CSS blur filter, but it blurs all my div content as well. And I've seen some people using SVG to get whatever is behind the <code>div</code>, blurring that and then showing it, just like photoshop masks, but that wouldn't work for me as I need a <code>fixed-top</code> navbar so it's scrolling with the browser through the whole page.</p>
  
  <p>So, I need to apply some css effect to this ´nav´, so it blurs whatever is behind it, or at least looks like it does that.</p>
  
  <pre><code>{# Navbar #}
      &lt;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;"&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand mx-auto" href="#"&gt;&lt;img src="{{ asset('img/logo-menu.png', 'theme') }}" style="max-height: 66px;"&gt;&lt;/a&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
              &lt;div class="navbar-nav mx-auto my-4 my-lg-0" style="padding: 0;"&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;{{ l('hotel') }}&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;{{ l('restaurantes') }}&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;{{ l('galeria') }}&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;{{ l('promocoes') }}&lt;/a&gt;
                  &lt;a class="nav-item nav-link" href="#"&gt;{{ l('contato') }}&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>