I'm creating a web app using Angular 12. In my nav menu, I want text to be a dark gray (#161413). However, my text color won't take below a certain shade. For example, I can make my text "medium" red (#670000), but cannot make it "dark" red (#450000) - the text simply appears white below that #67xxxx threshold. I've commented out all css (including my styles.css parent) and left only my navmenu class. As a side note: there seems to remain some css influence on my text because the medium red appears lighter than it should be - like some opacity setting.
.navbar {
color: black!important;
justify-content: center;
height: 20vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="navbar">
<div class="navmenu" *ngIf="atHome">
<button class="nav-button" routerLink="/">HOME</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button>
</div>
<div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()">
<div class="burger-shield" routerLink="/">
</div>
</div>
</div>looks like it works fine here. You are not giving us enough information. Show a complete snippet that showcases your problem
.navbar {
color: red;
justify-content: center;
height: 20vh;
}
#a{
color:#450000;
background-color:white;
}
#b{
color:#670000;
background-color:white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="navbar">
<div class="navmenu" *ngIf="atHome">
<button id='a' class="nav-button" routerLink="/">HOME</button> |
<button id ='b' class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> |
<button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button>
</div>
<div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()">
<div class="burger-shield" routerLink="/">
</div>
</div>
</div>Thanks for everyone's contribution. This one really had me stumped all morning and your confusion (as well as mine) as to why this seemingly simple snippet of code wasn't working forced me to think outside the box. I recently downloaded a firefox plugin called "darkreader" that makes a dark mode for every website I visit. This plugin has a slider to make dark shades brighter until they hit the forementioned threshold - at which point they are lightened.