Bootstrap sliders text overlay is disabling nav links - css

Question

I have used a bootstrap slider with text overlay and it is disabling the nav bar when I scroll down the page. When the text is level with the nav bar which is fixed, the links are disabled
Not sure if it is a bootstrap bug as I have used other sliders in the past which seem fine. The only think it that is is a one page website with many sections so the navbar needs to be fixed
<!------------NavigationBar------------>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo1.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">OUR TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price">PRICE PLANS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!------------Slider------------>
<div id="slider">
<div id="headerSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#headerSlider" data-slide-to="0" class="active"></li>
<li data-target="#headerSlider" data-slide-to="1"></li>
<li data-target="#headerSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>Business Consultants Is Who We Are</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/img2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>Create A Business Niche</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/img3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h5>Business Plan Support</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#headerSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#headerSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
/*-----------Navigation----------*/
#nav-bar{
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.navbar-brand img{
height: 80px;
padding-left: 30px;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
#nav-bar ul li a:hover{
color: #586949!important;
}
.navbar{
background: #fff;
}
.navbar-toggle{
border: none!important;
}
.nav-link{
color:green!important;
font-weight: 600;
font-size: 16px;
}
/*-----------Slider----------*/
#slider{
width: 100%;
background-color:rgba(255,0,0,0.1);
}
/*.carousel-item img{
height: 800px;
}*/
.carousel-caption{
top: 50%;
transform: translateY(-50%);
bottom: initial!important;
}
.carousel-caption h5{
color: #fff;
font-size: 40px;
font-weight: bold;
}