Whenever I include a link in my sidenav, it triggers a change where the sidenav’s background color switches to the main background color, forming a box shape around the linked text.https://i.sstatic.net/P0AU2.png
I’m aiming to eliminate the grey backdrop between spaces and instead utilize the somewhat black sidenav background color.
Here is my HTML file:
<body>
<div class="sidenav">
<h2>Spaces:</h2>
{% for space in spaces %}
<a href="/{{space}}">{{space}}</a>
{% endfor %}
</div>
</body>
This is how my CSS file looks:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252A;
}
.sidenav{
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
color: #818181;
}
.sidenav a{
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover{
color: #f1f1f1;
}
Your assistance with this issue would be greatly appreciated. Thank you!