<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="py-5 header text-center">
<div class="container py-5 text-white">
<header class="py-5">
<h1 class="display-4">Bootstrap sticky navbar</h1>
<p class="font-italic mb-1">Create a sticky top navbar using Bootstrap 4 utility classes.</p>
<p class="font-italic">Snippet by
<a class="text-white" href="https://bootsnipp.com/">
<u>Bootsnipp</u>
</a>
</p>
</header>
</div>
</section>
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm">
<div class="container"><a class="navbar-brand" href="#">
<strong class="h6 mb-0 font-weight-bold text-uppercase">Sticky navbar</strong></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
</div>
</nav>
</header>
