Css code for design and scrollbar - html

Question

I am trying to make the color of the side bar. when I try to make the browser window small the color at the bottom left is like a faded black and white and I am trying to make the scrollbar hidden but still can scroll and also looking a CSS code that can make the word steady when I close and open my side navigation menu.
Thank you for helping me in advance.
enter image description here
my css code
.contentnav{
height: 100%;
color: rgba(255,255,255,1);
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
padding-top: 50px;
transition: left 0.3s linear;
width: 50px;
display: block;
}
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
.contentnav ul li ul{
display: none;
}
.contentnav ul i{
margin-left: 10px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #000;
padding: 5px;
width: 25px;
padding-bottom: 8px;
cursor: pointer;
vertical-align:middle;
}
.contentnav ul{
list-style: none;
margin:0px;
padding:0px;
}
.contentnav ul span{
position: absolute;
margin-left: 21px;
cursor: pointer;
margin-top: 5px;
float: left;
}
.contentnav i:hover{
color: rgba(0,204,102,1);
}
my html code
<div class="contentnav" id="contentmenu">
<ul>
<li>
<i class="fas fa-home"></i>
<span id="same" class="nav-text">Home</span>
</li>
<li>
<i class="fas fa-book"></i>
<span id="same" class="nav-text">L</span>
<ul>
<li>-Bo</li>
<li>-B</li>
<li>-R</li>
<li>-E</li>
<li>-P</li>
</ul>
</li>
<li>
<i class="fas fa-hourglass-half"></i>
<span id="same" class="nav-text">Online</span>
</li>
<li>
<i class="fas fa-bookmark"></i>
<span id="same" class="nav-text">E</span>
<ul>
<li>-S</li>
<li>-Fee</li>
</ul>
</li>
<li>
<i class="fas fa-file-alt"></i>
<span id="same" class="nav-text">C</span>
</li>
<li>
<i class="fas fa-clipboard"></i>
<span id="same" class="nav-text">G</span>
</li>
<li>
<i class="fas fa-info-circle"></i>
<span id="same" class="nav-text">Announcement</span>
</li>
<li>
<i class="far fa-calendar-alt"></i>
<span id="same" class="nav-text">Calendar</span>
</li>
<li>
<i class="fab fa-hire-a-helper"></i>
<span id="same" class="nav-text">Guides</span>
</li>
<li>
<i class="fas fa-sign-out-alt"></i>
<span id="same" class="nav-text">Logout</span>
</li>
</ul>
</div>

Answer 1

I think this should do the trick.
Remove this and
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
Replace it with this.
.contentnav::-webkit-scrollbar-button
{
display: block;
height: 13px;
border-radius: 0px;
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-button:hover
{
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-thumb
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-thumb:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-track
{
background-color: #efefef;
}
.contentnav::-webkit-scrollbar-track:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar
{
width: 15px;
}