Bootstrap custom file input bugs on navbar overflow - html

Question

I coded a navbar which is fixed-top.
When I scroll, if there is body content passing through it, it must be hidden.
It works, but when I use the bootstrap custom class for files fields, there is a bug. The file field is not hidden when it overlaps the navbar.
I reproduced the problem here:
html
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!-- Bootstrap custom file input -->
<div class="container">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
css
html, body{
padding-top: 30px;
}
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.navbar .bg-primary{
border: 1px solid black;
}
And the demo : https://jsfiddle.net/kiuega/u3z8be4c/3/
Do you know what the problem is?
EDIT: I just noticed that the same thing happened when we use FullCalendar (https://fullcalendar.io/docs), it's the same thing!

Answer 1

Change the Navbar "z-index" to 2 or more.. its better to make the z-index to 9999 (Extreme Value) that means it always top the top of the content..
otherwise if there is any other div or section that have greater z-index than the navbar then that div or section overlape the navbar..
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}