How to navbar boostrap over all elment in css?

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;
}