与导航栏引导重叠的中央徽标 [英] Central logo that overlaps navbar bootstrap

问题描述

您好，我正在尝试让我的导航栏看起来像这样：

但我似乎想不出如何将图像放在导航栏的顶部。我正在使用Bootsrap 5。我还没有向导航栏添加任何css，但有没有一些属性可以用来将它带到前面。谢谢，这是html：

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
          <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
          <!-- <a href="#"><img src="/images/logos/circle-cropped.png"></a> -->
        </ul>
      </div>
    </div>
  </nav>
</header>

推荐答案

WORKING DEMO HERE

此css应该有帮助：

.navbar-brand {
  flex: 0 1 auto;
  display: block;
  width: 100px;
  height: 100px; 
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%);
  text-align: center;
}

.navbar-brand img {
  max-height: 100%;
  max-width: 100%;
}

这篇关于与导航栏引导重叠的中央徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！