Recently I have been exploring bootstrap-4 and encountered an issue while creating a nav-bar. The problem is that in responsive view, when toggling the nav-bar it simply pushes the content below it. Is there any way to address this issue within (bootstrap-4)? Ideally, I would like the nav-bar to always remain at the top of every content without pushing anything below it.
<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 here</h3>
<p>More content goes here.More content goes here.More 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 here</h3>
<p>More content goes here.More content goes here.More 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 here</h3>
<p>More content goes here.More content goes here.More 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 here</h3>
<p>More content goes here.More content goes here.More 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>