HTML BootStrap Navbar not displaying as expected - html

Question

I recently added a bootstrap navbar in a react app but it is not displaying properly when I switch sections eg. from the main page to the services page. I want a dark navbar to be displayed when switching pages instead
This is my HTML code for the navbar
<nav className="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

Answer 1

Try creating a stylesheet and link it in your header.
Here is the code to include in the head. This would link in a stylesheet named "styles.css":
<link rel="stylesheet" href="styles.css"/>
Within this stylesheet try this:
#darkNavbar{
color : black
}
This will make attributes with id = "darkNavbar" be the color black.
I've updated your code to remove the class navbar-dark and gave the navbar the darkNavbar id.
<nav id="darkNavbar" className="navbar navbar-expand-lg fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Give this a shot. Let me know if it's any help.

Answer 2

just trigger the navbar color to black in a style tag...
<style>
.navbar-dark{
color: black;
}
</style>