Currently, I am utilizing bootstrap 4 and font awesome icons in my project.
I have been working on developing a side navbar with animation. However, I am facing an issue where whenever I hover over a ul item, all of the items below it shift up and hide underneath the item that is being hovered.
Is there a way for me to prevent this behavior?
<style type="text/css">
.sidenav .container {
position: fixed;
overflow-x: visible;
max-width: 50px;
top: 15%;
max-height: 70%;
justify-content: left;
padding-left: 0;
z-index: 1;
}
.nav-item .btn {
color: lightgray;
width: 100%;
background-color: #343a40;
border-bottom: #0c0c0c solid;
border-radius: 0 10px 10px 0;
transition: color 400ms, width 400ms;
}
.sidenav .btn:focus {
box-shadow: none !important;
}
.nav-item:hover > .btn:hover {
background-color: lightgray;
color: #343a40;
width: 75px;
position: absolute;
}
</style>
<div class="sidenav">
<div class="container">
<ul class="nav flex-column">
<li class="nav-item">
<button class="btn" data-toggle="modal" data-target="#notebookModal"><i
class="fas fa-clipboard-list fa-2x"></i></button>
</li>
<li class="nav-item">
<button class="btn" data-toggle="modal" data-target="#addNoteModal"><i
class="fas fa-plus-circle fa-2x"></i></button>
</li>
</ul>
</div>
</div>