I'm struggling to get my navigation menu to stick at the top and be responsive on mobile with a toggle bar icon. I'm using Bootstrap 4, and I've tried using sticky-top and fixed-top in the div classes, as well as position fixed in my header CSS, but it's not working properly.
Here's the code snippet:
header {
border-bottom: 1px solid pink;
}
.nav {
font-family: 'Lato', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
padding: 5px;
}
.nav-link {
color: black;
margin-right: 20px;
margin-left: 20px;
}
.dropdown-menu {
font-family: 'Lato', sans-serif;
font-size: 12px;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
border: 0px;
}
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
transform: translate(-50%, 0) !important;
margin-top: 30px;
}
.dropdown-menu a:hover {
color: pink;
background-color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- Nav menu -->
<header style="background-color:fff;">
<div class="container">
<div class="row justify-content-center">
<nav>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<div class="nav-item dropdown show">
<a class="nav-link" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Wordpress Design</a>
<a class="dropdown-item" href="#">Add-Ons</a>
<a class="dropdown-item" href="#">Branding</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="#">How To Start A Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End of nav menu -->
<div style="padding:1000px;">hi</div>