如何在css中对所有elment进行导航栏增强？

Question

我想导航栏引导4在所有元素，现在可以在所有元素，但当使用旋转木马在身体导航栏崩溃

导航栏-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>

导航栏-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)
    }
}

旋转木马-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>

旋转木马-CSS

.carousel-inner img {
        width: 100%;
        height: 600px;
    }

开放式导航

$('.navbar-toggler').on('click',function () {
    $('.mobileMenu').toggleClass('open-nav');
    $('.app-content').toggleClass('body-blur');
});

使用bootstrap4，ASP。净MVC5

开放导航和关闭导航

当移除转盘代码导航条工作并打开成功时

卸下转盘

如果使用任何div没有问题和工作，但当使用转盘导航隐藏回转盘。

**感谢所有的建议**

Answer 1

试试看：

.mobileMenu {
  z-index: 9999999;
}