When i want to close my navbar, the navbar is very slow to disappear. Here is the code
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');
});
Here’s the video how slow it to disappear
https://youtube.com/shorts/9EHFJC8Q7Ac?feature=share
I expect faster disappear of all the menus right when i click it
2
Answers
I have already solved this problem by changing
with
Thank you
can you try this –
Remove the transition property