I integrated Bootstrap 5's Navbar into my Wordpress website. However, I am facing an issue with alignment when the screen size changes. The button and expanded menu items do not align perfectly with the navbar-brand H2 element.
I have tried various solutions but cannot seem to get the expanded menu to align correctly without causing other issues. Any assistance would be greatly appreciated.
Header.php HTML
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<div class="row d-flex align-item-center justify-content-between">
<div class="col ">
<div class="dropdown-container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="site-menu dropdown-primary">
<ul id="primary-menu" class="navbar-nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-16"><a href="https://example.com/" aria-current="page">Test</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="https://example.com/checkout/">Checkout</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="https://example.com/sample-page/">Sample</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://example.com/shop/">Shop</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://example.com/aboot-us/">Aboot Us</a></li>
</ul>
</div>
<!-- other nav ul lists -->
</div>
</div>
</div>
<div class="col">
<a class="navbar-brand" href="https://www.example.com"><h2>Online Shop</h2></a>
</div>
</div>
</div>
</nav>
CSS
header .navbar-brand h2 {
color: white;
padding: 1rem 0;
}
#primary-menu li a {
display: block;
padding: 0.25rem 1rem;
color: rgb(176, 252, 153);
font-size: 1rem;
font-weight: bold;
white-space: nowrap;
}
.dropdown-container {
position: relative;
}
.dropdown-primary {
position: absolute;
top: 100%; /* Bottom of button */
left: 0;
margin-right: -100px;
}