The issue lies in the drop-down functionality (you can check out the problematic html code on this codepen, originally inspired by this source).
<header class="pb-3">
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom">
<div class="d-flex w-100 navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li>
<div style="width: 100px; height: 100px">
<a href="#">
<img src="../static/store_logo.png" alt="logo" />
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-none d-md-block fw500" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product categories
</a>
<ul class="dropdown-menu rounded-0 border-0">
<a href="#">
<li>Foo</li>
</a>
<a href="#">
<li>Bar</li>
</a>
<a href="#">
<li>Baz</li>
</a>
</ul>
</li>
</ul>
</div>
</nav>
</header>
In the original layout, the problem was masked as the logo image inside the nav > .navbar ul was small. The issue became apparent when a larger image was used, which I mimicked with a fixed 100 by 100 px div in the pen. The main issue is with the behavior of the drop-down within the same nav. The list of items in .dropdown-menu (ul) does not align properly with the bottom of the .dropdown-toggle element - instead, it aligns with the bottom of the .navbar-nav ul, which is influenced by the size of the li containing the image.
As someone new to CSS, I am unsure of the root cause of the problem. Could it be a clash between some bootstrap classes? I even attempted adding z-index to the .dropdown-menu ul without success. The basic dropdown example in the Bootstrap documentation seems to work fine without any additional adjustments - but it does not involve navs/navbars or multiple parent elements.
Thank you for your assistance!