I've been struggling to change the link color of the signup class in one of my navigation items to white. No matter what I do, the color remains default and does not change. Here is the code snippet:
HTML
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
position: relative;
background-color:#ffffff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
How can I successfully change the link color of the signup nav item to white? Any help or suggestions would be greatly appreciated! For reference, please check out the complete example provided in the comments section.