WordPress Bootstrap5 Navbar is not aligned with other col div

Question

I implemented Bootstrap 5's Navbar into Wordpress. When the screen size is smaller, the button appears and is aligned on the horizontal axis with the H2 navbar-brand. However, when the screen is larger and the menu expands, the items appear "lower" than navbar-brand.

I can't figure out how to get the expanded menu to align with navbar-brand without breaking something else. Would appreciate any help.

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; 
}

Answer 1

Your navbar was quite different from the Bootstrap-5 standard. You had a row and some columns in your navbar, which aren’t really needed. The navbar collapse function does the job of changing the layout for smaller screens. And you had a class, dropdown-container, that was putting your navigation links below your navbar, so I removed that. Also, you had a dropdown-container div that I wasn’t sure was for, so I removed it.

Bootstrap’s navbar is very powerful, but is easily broken, so it’s best to not change too much at one time.

With the code you have, there’s no indication for the current page.

Updated to have the small-screen menu items on the right (under the hamburger button)

If you want the menu items to be on the right side of the screen for small screens, you can add text-end to each item. That will cause the items to line up on the right in the collapsing menu, but it’ll have no impact on the links for larger displays.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>

<style>
    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;
    }
    
    .navbar-brand {
        font-size: 2rem;
    }
</style>

<nav class="navbar navbar-expand-md navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Online Shop</a>
        <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">
            <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 text-end"><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 text-end"><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 text-end"><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 text-end"><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 text-end"><a href="https://example.com/aboot-us/">About Us</a></li>
            </ul>
            <!-- other nav ul lists -->
        </div>
    </div>
</nav>