<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>
<div class="top bg-dark text-light py-3">
<div class="container-nav topheader">
<div class="d-flex justify-content-between">
<div class="left">
<a class="text-light logo lead" terget="_blank" href="https://www.totoprayogo.com">Logo</a>
</div>
<div class="kanan">
Right
</div>
</div>
</div>
</div>
<div class="bottom bg-light sticky-top shadow-sm">
<div class="container-nav">
<ul class="nav nav-bottom nav-fill">
<li class="nav-item">
<a class="nav-link bg-primary text-white" terget="_blank" href="https://www.totoprayogo.com"><i class="fas fa-user-circle"></i> <span class="d-none d-sm-inline-block d-md-inline-block">People</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" terget="_blank" href="https://www.totoprayogo.com"><i class="fas fa-file-invoice"></i> <span class="d-none d-sm-inline-block d-md-inline-block">Project</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#"><i class="fas fa-plus-circle"></i> <span class="d-none d-sm-inline-block d-md-inline-block">New</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#"><span class="badge badge-danger badge-pill custom-badge">20</span> <i class="fas fa-bell"></i> <span class="d-none d-sm-inline-block d-md-inline-block">Notification</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#"><i class="fas fa-cog"></i> <span class="d-none d-sm-inline-block d-md-inline-block">Setting</span></a>
</li>
</ul>
