Every time I try to close my navbar, it seems to take forever for the navbar to disappear. Below is the code snippet:
HTML
<!-- logo -->
<div class="logo">
<img src="assets/logo.png" alt="logo g's shop">
</div>
<i class="ri-menu-line" id="menu-icon"></i>
<!-- nav -->
<ul class="nav nav-pills nav-fill m4">
<li class="nav-item">
<a class="nav-link active .bg-white" aria-current="page" href="#">ALL ITEM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SMARTPHONES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LAPTOPS</a>
</li>
</ul>
CSS
.nav {
position: absolute;
z-index: 10001;
top: 65px;
right: 30px;
width: 270px;
background-color: #f3efef;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 4px;
transition: all .50s ease;
font-size: 14px;
}
.nav-item {
margin-top: -2px;
border-radius: 4px;
}
#menu-icon {
display: block;
}
.nav.open {
visibility: hidden;
}
JS (JQuery)
$('#menu-icon').click(function() {
$('.nav').toggleClass('open');
});
Check out this video demonstrating the slow disappearance:
I would like the menus to disappear more quickly when clicked on.