Html WordPress Bootstrap5导航栏未与其他col div对齐

我在Wordpress中实现了Bootstrap5的导航栏。当屏幕尺寸较小时，按钮出现，并与H2 navbar品牌在水平轴上对齐。但是，当屏幕更大且菜单展开时，项目显示为“低于”navbar品牌

我不知道如何在不破坏其他东西的情况下使扩展菜单与navbar品牌保持一致。非常感谢您的帮助

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> 

---

您的导航栏与Bootstrap-5标准截然不同。您的导航栏中有一行和一些列，它们实际上并不需要。导航栏折叠功能用于更改较小屏幕的布局。您有一个类，

下拉容器，

将导航链接放在导航栏下面，所以我删除了它。另外，您有一个下拉式容器div，我不确定它的用途，所以我删除了它

Bootstrap的导航条功能非常强大，但很容易损坏，所以最好不要一次更改太多

使用您拥有的代码，当前页面没有任何指示

更新后，小屏幕菜单项位于右侧（汉堡按钮下方） 如果您希望小屏幕的菜单项位于屏幕右侧，可以向每个菜单项添加

text end

。这将导致项目在折叠菜单的右侧对齐，但不会影响较大显示的链接

标题：导航栏品牌h2{
颜色：白色；
填充：1rem0；
}
#主菜单LIA{
显示：块；
填充：0.25rem 1rem；
颜色：rgb（176252153）；
字号：1rem；
字体大小：粗体；
空白：nowrap；
}
.navbar品牌{
字号：2rem；
}

您能编辑代码，用WordPress插入的代码替换wp函数吗？用HTML@richdebourket替换wp代码感谢您花时间尝试并提供帮助。实际上，我注意到col和row并不是真正必要的，但我在尝试让导航链接与在线商店对齐时，把它放在了那里。下拉容器和下拉主菜单用于定位下拉菜单，以便链接直接显示在按钮下方。我试图避免navbar品牌堆积在扩展菜单的顶部，当屏幕变小时，我希望菜单显示在汉堡按钮的正下方。我更新了答案，将菜单项向右移动。如果这不是你想要的，也许你可以在你的问题中添加一张图片，展示你想要的小屏幕和大屏幕。这让我达到了我需要的位置。多谢各位@Richdebourke很高兴我们得到了你需要的。

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