Bootstrap 5如何实现居中logo重叠覆盖顶部导航栏

1. 调整HTML结构 #

你当前的.navbar-brand放在导航列表<ul>内部，结构不符合布局要求，先调整为如下结构：

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark custom-nav">
    <div class="container-fluid">
      <!-- logo放到最外层，和折叠按钮、菜单同级 -->
      <a class="navbar-brand" href="#">
        <img src="/images/logos/circle-cropped.png" alt="站点logo">
      </a>
      <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 ms-auto">
          <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>
          <!-- 其他导航项可以继续加 -->
        </ul>
      </div>
    </div>
  </nav>
</header>

如果需要logo居中显示，给.navbar-brand加Bootstrap自带类mx-auto即可。 #

2. 添加自定义CSS #

你需要添加少量自定义CSS实现上浮效果，核心是层级控制和负边距偏移：

/* 自定义导航栏样式 */
.custom-nav {
  /* 给导航栏加顶部内边距，避免导航文字和上浮的logo重叠 */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* logo样式控制 */
.navbar-brand img {
  /* 按需调整logo高度，宽度会自适应 */
  height: 70px;
  width: auto;
}
.navbar-brand {
  /* 提升logo层级，保证显示在导航栏上层 */
  z-index: 999;
  position: relative;
  /* 负上外边距，数值为logo高度的一半左右，实现一半上浮效果 */
  margin-top: -35px;
}

/* 避免固定定位导航栏遮挡页面内容，按需调整数值 */
body {
  padding-top: 70px;
}

核心属性说明 #

• z-index：控制元素的堆叠层级，数值越大越靠上显示，只要比导航栏默认的层级高即可
• position: relative：z-index只对非static定位的元素生效，给logo加相对定位不影响原有布局，同时可以激活z-index属性
• 负margin：实现logo向上偏移，超出导航栏范围的效果

内容的提问来源于stack exchange，提问作者Ecburt