I noticed that my navbar changes from transparent to opaque when scrolling. I am trying to achieve a similar effect like the one in this example:
https://i.sstatic.net/00uPM.png
Initially, my navbar looks like this:
https://i.sstatic.net/iMyYL.png
As you can see, it has a light border and the font is not white. However, I want it to look more like the example I provided above. Can someone please assist me with achieving this?
Here is the code I have implemented so far:
<nav class="navbar navbar-inverse navbar-expand-lg navbar-dark fixed-top shadow-lg">
<div class="container">
<a class="navbar-brand" href="#">
<img src="" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link p-2 text-dark" href="/">Lorem <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link p-2 text-dark" href="/uns">Lorem <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle p-2 text-dark" href="#" id="navbarDropdownMenuLink"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Produkte
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#winkelstufe">Lorem</a>
<a class="dropdown-item" href="#auftritt">Lorem</a>
<a class="dropdown-item" href="#volltritt">Lorem</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2 text-dark" href="/galerie">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link p-2 text-dark" href="/jobs">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link p-2 text-dark" href="#contact2">Lorem</a>
</li>
</ul>
</div>
</div>
Here is my CSS:
nav.navbar{
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.navbar-inverse {
/* background-color: #222;
border-color: #080808; */
}
nav.navbar.transparent {
background-color:white;
}
.navbar {
background: transparent;
font-size: 1rem;
}
And here is my JavaScript:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('transparent');
} else {
$('nav').removeClass('transparent');
}
});