В последнее время я использую bootstrap-4.Я пытаюсь создать навигационную панель, но проблема в адаптивном представлении, когда я переключаю навигационную панель, она просто выдвигает содержимое под ней.Есть ли способ решить эту проблему в (bootstrap-4).Так что навигационная панель всегда остается сверху каждого контента и не выдвигает контент под ним.
<nav class="navbar navbar-expand-sm bg-primary navbar-dark sticky-top">
<div class="container">
<a href="" class="navbar-brand">
<img src="images/kick_ass_2.jpg" alt="" class="img-fluid img-thumbnail" style="width: 50px; height: 50px"/>
</a>
<button type="button" class="navbar-toggler" data-target="#mainMenu" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="navbar-nav mr-auto">
<li><a href="" class="nav-link">Home</a></li>
<li><a href="test.html" class="nav-link">About</a></li>
<li class="dropdown"><a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Service</a>
<ul class="dropdown-menu bg-primary">
<li><a href="test.html" class="nav-link">Service one</a></li>
<li><a href="test.html" class="nav-link">Service two</a></li>
<li><a href="test.html" class="nav-link">Service three</a></li>
</ul>
</li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
<ul class="navbar-nav">
<li><a href="" class="nav-link" data-toggle="modal" data-target="#loginModal">Login</a></li>
<li><a href="" class="nav-link" data-toggle="modal" data-target="#signUpModal">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<div id="mainSlider" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#mainSlider" data-slide-to="0" class="active"></li>
<li data-target="#mainSlider" data-slide-to="1"></li>
<li data-target="#mainSlider" data-slide-to="2"></li>
<li data-target="#mainSlider" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/kick_ass_2.jpg" alt="" class="w-100 img-hight"/>
<div class="carousel-caption">
<h3>Some content goes here</h3>
<p>Some content goes here.Some content goes here.Some content goes here.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/shield_of_captain_america.jpg" alt="" class="w-100 img-hight"/>
<div class="carousel-caption">
<h3>Some content goes here</h3>
<p>Some content goes here.Some content goes here.Some content goes here.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/max_payne_3_new.jpg" alt="" class="w-100 img-hight"/>
<div class="carousel-caption">
<h3>Some content goes here</h3>
<p>Some content goes here.Some content goes here.Some content goes here.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/watchmen_smiley.jpg" alt="" class="w-100 img-hight"/>
<div class="carousel-caption">
<h3>Some content goes here</h3>
<p>Some content goes here.Some content goes here.Some content goes here.</p>
</div>
</div>
</div>
<a href="#mainSlider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#mainSlider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>