How to navbar boostrap over all elment in css? - html

Question

i want navbar Bootstrap 4 over all element,
now can over all element but when use Carousel in Body navbar-collapse
NAVBAR - HTML
<nav class="navbar navbar-expand-md navbar-dark bg-main">
<a class="navbar-brand d-md-none order-1" style="font-size:26px;line-height:0" href="#">【K】【S】【J】</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-column flex-row flex-lg-row flex-xl-row justify-content-lg-end bg-main p-3 p-lg-0 mt-5 mt-lg-0 mobileMenu" id="navbarSupportedContent">
<ul class="navbar-nav d-flex d-flex justify-content-around text-right px-3" dir="rtl">
<li class="nav-item active" style="">
<a class="nav-link" href="#">
<span>Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span>Anout</span>
</a>
</li>
</ul>
</div>
</nav>
NAVBAR - CSS
/* Mobile Menu */
#media only screen and (max-width: 992px) {
.mobileMenu {
position: fixed;
top: 70px;
bottom: 0;
right: -100rem;
margin: auto;
transform: translateX(-100);
transition: all ease .25s;
}
.open-nav {
right:0;
}
.body-blur{
filter: blur(5px)
}
}
Carousel - HTML
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="~/Content/documents/shared/dev1.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev7.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev6.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
#*<a class="carousel-control-prev shadow-lg" href="#mainCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next shadow-lg" href="#mainCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>*#
</div>
Carousel - CSS
.carousel-inner img {
width: 100%;
height: 600px;
}
Open Nav
$('.navbar-toggler').on('click',function () {
$('.mobileMenu').toggleClass('open-nav');
$('.app-content').toggleClass('body-blur');
});
Use Bootstrap 4, ASP.NET MVC5
Open Nav and
Close Nav
When Remove Carousel code nav bar work and open success
Remove Carousel
if use any div not problem and work but when use Carousel nav hidden back Carousel.
**Thanks for all suggestions **

Answer 1

Try it:
.mobileMenu {
z-index: 9999999;
}