I am working on customizing Bootstrap 5's navbar menu to create a rollover menu with parallelogram-shaped active menu items. I followed the approach recommended here, and while it works, the output is not as polished as I would like because the parallelogram-shaped menu items do not align perfectly.
When the active state is enabled for all of the menu items (in Firefox, but also noticeable in Chrome), this is how it appears:
https://i.sstatic.net/LKaXI.png
You can view a sample demonstrating the issue and containing all the relevant code in this CodePen.
For reference, here is the markup required, even though it is included in the CodePen:
.navbar {
padding-top: 0;
}
.navbar-nav {
display: table;
width: 100%;
}
.navbar-nav>li {
float: none;
display: table-cell;
text-align: center;
transform: skewX(-40deg);
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
}
.navbar-nav>li span {
display: inline-block;
transform: skewX(40deg);
-o-transform: skewX(40deg);
-moz-transform: skewX(40deg);
-webkit-transform: skewX(40deg);
}
.navbar-nav .show>.nav-link,
.navbar-nav .nav-link {
color: #000;
transition: all 350ms ease-out;
-webkit-transition: all 350ms ease-out;
-moz-transition: all 350ms ease-out;
-o-transition: all 350ms ease-out;
}
.navbar-nav .active {
color: #FFF;
background: #000;
}
.navbar-nav .nav-link:hover {
color: #FFF;
background: #000;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg collapsed" aria-label="Eighth navbar example">
<div class="container">
<a class="navbar-brand me-6 me-xl-7" href="#">Brand</a>
<button class="navbar-toggler third-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-home" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon">
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbar-home">
<ul class="navbar-nav mb-auto mb-2 my-0 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><span>Find My Car</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><span>Frequently Asked Questions</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><span>Testimonials</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><span>Contact Us</span></a>
</li>
</ul>
</div>
</div>
</nav>I need assistance resolving why my menu items are not aligning properly and how I can adjust them to be flush. Any suggestions?