Make Bootstrap Nav Sticky Top - html

Question

I am making a website with Bootstrap and the navbar to stick to the top however using the class sticky-top doesn't seem to do anything.
Here is the code for the nav:
<div class="row">
<div class="col-md-12">
<ul class="nav justify-content-center sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
Hope someone can help!

Answer 1

You need to put sticky-top to the container of your navbar, if that row is the navbar, then you need to put it there instead of its child.
/* For displaying */
body {
height: 300vh;
background-image: linear-gradient(to bottom, white, black);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- You need to move sticky-top to the outer element of navbar, which is here -->
<div class="row sticky-top">
<div class="col-md-12">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>