I've spent over an hour grappling with this problem and can't seem to find a solution.
Whenever the navigation menu collapses and I hover my mouse over the SHOP item, it shifts the SHOP element to the left. When I move the cursor away, it returns to its central position. The SHOP should remain aligned with the other two menus (without moving left).
I've tried adjusting the dropdown-menu class and CSS for the dropdown, but nothing seems to work.
Any guidance in the right direction would be greatly appreciated. Thank you
HTML:
<div class="collapse navbar-collapse nav-layout" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index">HOME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle"dropdown" aria-haspopup="true" aria-expanded"false">SHOP</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="products">Tealights</a>
<a class="dropdown-item" href="products">Wax-Melts<span class="sr-only">(current)</span></a>
<a class="dropdown-item" href="products">Medium Candle</a>
<a class="dropdown-item" href="products">Large Candle</a>
<a class="dropdown-item" href="products">X-Large Candle</a>
</div>
</li>
<li>
<a class="nav-link" href="contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
CSS:
.narbar-default .navbar-nav > li.dropdown:hover > a,
.narbar-default .navbar-nav > li.dropdown:hover > a:hover,
.narbar-default .navbar-nav > li.dropdown:hover > a:focus, {
color: rgb(100, 100, 100);
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: #909090;
}