Attempting to construct a webpage from scratch for the first time, without relying on a template. I aim to implement a fixed top bar above the navigation bar. Referencing this example:
This is my current code:
window.onscroll = function() {
scrollFunction();
};
var first = true;
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
document.getElementById("navbar").classList.add('fixed-navbar');
} else {
document.getElementById("navbar").classList.remove('fixed-navbar');
}
}.navbar {
position: absolute !important;
width: 100%;
transition: all .5s;
}
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
... (remaining CSS code omitted for brevity)
I am looking to achieve a similar effect as seen in the example provided. How can I create a transparent top bar above the nav utilizing Bootstrap functionalities?
Edit:
The addition of the following code above the nav results in a non-transparent appearance, while placing it inside the nav does not yield the desired effect:
<div class="d-block">
<div class="container">
... (additional HTML code omitted for brevity)
</div>
</div>