I'm struggling with coding a fixed navbar at the bottom of my page. The navbar consists of plain text without a background color and I want the text to invert color to remain visible over different backgrounds. I've tried using mix-blend-mode in my HTML and CSS, but can't seem to get it right.
Below is the basic code for the navbar:
HTML<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS
nav {
position: fixed;
bottom: 2%;
right: 2%;
z-index: 1000;
}
ul {
display: flex;
flex-direction: row;
list-style-type: none;
}
ul li {
padding: 1rem;
}
ul li a {
color: var(--black);
text-decoration: none;
font-weight: 300;
}