My minicart modal displays correctly when hovered over, but there is a flickering issue when hovering off that I'm struggling to resolve.
I have made updates to the code to provide more of the menu HTML structure and a comprehensive CSS for styling the dropdown menu.
You can see a demo of the site here - Password to access is - demostore2020
HTML Code:
<div class="col-md-4 col-xs-12 col-sm-4">
<ul class="top-menu list-inline float-right mt-3 mb-3">
<li class="nav-item dropdown list-inline-item mini-cart">
<a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" data-target="#cartModal" aria-haspopup="true" aria-expanded="false" >
Cart
</a>
<div class="dropdown-menu" id="cartModal" aria-labelledby="navbarDropdown">
<div class="dropdown-item-text">
{% include 'minicart' %}
</div>
</div>
</li>
</ul>
</div>
CSS Code:
.navbar-nav .dropdown .dropdown-menu a {
color: #222;
font-size: 12px;
border: 1px solid transparent;
display: block;
padding: 8px 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: .3s all;
}
/* More CSS styling... */
.dropdown-divider {
height: 0;
margin: 0;
overflow: hidden;
border-top: 0px solid #e9ecef;
}