title: How to navbar boostrap over all elment in css?
body: <p>i want navbar Bootstrap 4 over all element, 
  now can over all element but when use <strong>Carousel</strong> in Body <strong>navbar-collapse</strong></p>
  
  <p><strong>NAVBAR - HTML</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-dark bg-main"&gt;
          &lt;a class="navbar-brand d-md-none order-1" style="font-size:26px;line-height:0" href="#"&gt;【K】【S】【J】&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;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"&gt;
              &lt;ul class="navbar-nav d-flex  d-flex justify-content-around text-right px-3" dir="rtl"&gt;
                  &lt;li class="nav-item active" style=""&gt;
                      &lt;a class="nav-link" href="#"&gt;
                          &lt;span&gt;Home&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;
                          &lt;span&gt;Anout&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p><strong>NAVBAR - CSS</strong></p>
  
  <pre><code>    /* 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)
      }
  }
  </code></pre>
  
  <p><strong>Carousel - HTML</strong></p>
  
  <pre><code>&lt;div id="mainCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;ul class="carousel-indicators"&gt;
          &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#demo" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#demo" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#demo" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
              &lt;img src="~/Content/documents/shared/dev1.jpg" alt="Los Angeles"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;Los Angeles&lt;/h3&gt;
                  &lt;p&gt;We had such a great time in LA!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img src="~/Content/documents/shared/dev2.jpg" alt="Chicago"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;Chicago&lt;/h3&gt;
                  &lt;p&gt;Thank you, Chicago!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img src="~/Content/documents/shared/dev7.jpg" alt="New York"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;New York&lt;/h3&gt;
                  &lt;p&gt;We love the Big Apple!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img src="~/Content/documents/shared/dev6.jpg" alt="New York"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;New York&lt;/h3&gt;
                  &lt;p&gt;We love the Big Apple!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      @*&lt;a class="carousel-control-prev shadow-lg" href="#mainCarousel" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next shadow-lg" href="#mainCarousel" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
      &lt;/a&gt;*@
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Carousel - CSS</strong></p>
  
  <pre><code>.carousel-inner img {
          width: 100%;
          height: 600px;
      }
  </code></pre>
  
  <p><strong>Open Nav</strong></p>
  
  <pre><code>$('.navbar-toggler').on('click',function () {
      $('.mobileMenu').toggleClass('open-nav');
      $('.app-content').toggleClass('body-blur');
  });
  </code></pre>
  
  <blockquote>
    <p>Use Bootstrap 4, ASP.NET MVC5 </p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/Yi3nE.png" rel="nofollow noreferrer">Open Nav</a> and
  <a href="https://i.stack.imgur.com/hvjgL.png" rel="nofollow noreferrer">Close Nav</a></p>
  
  <blockquote>
    <p>When Remove Carousel code <strong>nav</strong> bar work and open success</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/dXKRE.png" rel="nofollow noreferrer">Remove Carousel </a></p>
  
  <hr>
  
  <p>if use any div not problem and work but when use Carousel  nav hidden back Carousel.</p>
  
  <p>**Thanks for all suggestions ** </p>