I have a navbar and as soon as I opened it on mobile I want background blur as you see in the picture.
here is my navbar:
<!--navigation-->
<section class="smart-scroll">
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand heading-black" href="index.html">
<img src="img/logo.png" class="logo" alt="Logo" />CineFi.Network
</a>
<button
class="navbar-toggler navbar-toggler-right border-0"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span data-feather="grid"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#staking">Staking</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#cine-token"
>Cine Token</a
>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#connect-wallet"
>Connect Wallet</a
>
</li>
</ul>
</div>
</nav>
</div>
</section>
And my cs for navbar:
@media (max-width: 576px) {
.navbar {
padding-left: 0;
padding-right: 0;
}
.navbar-dark .navbar-brand {
font-size: 24px;
}
#navbarCollapse {
background-color: #29292a;
padding: 1rem 0;
}
}
I didn't post the rest of the css for the navbar in the desktop but if you think it is necessary I can edit my question.I apply blur but first I need to blur it when the navbar is opened and second I need to blur whole body, so that's what I dont know how to do.
