When scrolling up with my Bootstrap navbar, the block content appears behind the fixed top navbar. My Navbar code is as follows:
<main id="navfix" class="m-5">
<nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">
{% include 'sidebar.html' %}
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-lg-0">
<div>...</div>
</ul>
</div>
</nav>
</main>
<div class="block__content">
{% block content %}
{% endblock %}
</div>
Additional CSS can be found below:
#navfix {
width: 100%;
}
.navabar_bgc {
background-color: rgba(103, 250, 34, 0.4) !important;
box-shadow: 0px 0px 8px !important;
z-index: 10 !important;
}
.block__content {
z-index: 5;
overflow: auto;
}
https://i.sstatic.net/dmSt1.png
If you have any other suggestions, please let me know. Thank you.