Despite my efforts to find solutions online, my CSS is refusing to cooperate even after trying various methods that worked for others.
Here, you can view a JSFiddle where I have replicated the issue: I am aiming for the side navigation to be visible on the black sections as well.
HTML
<div class="sidenav">
<a href="#" class="selected">Section 1</a>
<a href="#">Section 2</a>
<a href="#">Section 3</a>
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}