The menu expands smoothly when opened but has a slight pause before continuing to slide down. Closing the menu seems to be smoother compared to opening it.
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
@media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
…
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
…
transition: all 0.25s;
filter: alpha(opacity=100);
…
</div><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-…
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
…
</ul>
</div>
…