愿所有的美好和期待都能如约而至

与导航栏引导重叠的中央徽标

发布时间:  来源:互联网  作者:匿名  标签:bootstrap-5 css error Central logo that overlaps navbar bootstrap exception html  热度:37.5℃

本文介绍了与导航栏引导重叠的中央徽标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

但我似乎想不出如何将图像放在导航栏的顶部。我正在使用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%;
}

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

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP