I'm not able to change the color of the ".navlink" to white in my html file. Please help me to change the color of the ".navlink" to white.
<section id="navbar-section">
<nav >
<a href="#" >tent workshop</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a href="#" aria-current="page">Home</a>
</li>
<li >
<a href="#" aria-current="page">Contact</a>
</li>
<li >
<a href="#" aria-current="page">Products</a>
</li>
</ul>
</div>
</nav>
</section>
CodePudding user response:
You should always use the selectors that Bootstrap uses to be able to override the color defined by bootstrap. Also, your CSS must be included after Bootstrap.
.navbar-nav .nav-link {
color: #ffffff;
}
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
color: #ffffff;
}
OR you override the CSS from Bootstrap by using "!important"
.nav-link {
color: #ffffff!important;
}
.nav-link:focus,
.nav-link:hover {
color: #ffffff!important;
}
CodePudding user response:
would you try this?
<a href="#" style="color:white;" aria-current="page">Home</a>
style="color:white;" it usually works
CodePudding user response:
<nav >
Try this . It will make your navigation bar background color to white