I have the navbar change from a transparent to a white background when I scroll. The text is white on the transparent, but I want to change the text to black when scroll to get a contrast. The problem is that color:black don't work? I dont know if this is enough info to find a solution, just write a comment on what more you need.
HTML
<header class="navbar-fixed-top">
<a href="#" id="logo" class="logo">Example<br>1001</a>
<nav id="navigation">
<ul class="nav__links">
<li><a class="hvr-reveal hjem" href="#">HOME1</a></li>
<li><a class="hvr-reveal webkamera" href="#">HOME2</a></li>
<li><a class="hvr-reveal værmelding" href="#">HOME3</a></li>
<li><a class="hvr-reveal status_nav" href="#">HOME4</a></li>
</ul>
</nav>
</header>
CSS
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
/* navbar change on scroll */
.navbar-fixed-top.scrolled {
background-color: red !important;
transition: background-color 200ms linear;
z-index: 1;
color: black;
}