Bootstrap 5导航栏：实现Logo重叠及切换栏内容居中对齐

我正在基于11ty+Bootstrap开发模板，已克隆11straps模板到本地进行开发。原导航栏为带背景色的文本Logo样式，包含默认边距与内边距。我需要实现三个导航栏效果：

• Logo重叠显示（超出导航栏本身范围）
• 移动端切换栏展开后内容居中
• 导航栏展开时能推动主体内容下移

修改代码后未达到预期效果，相关截图：

• 原导航栏截图
• 预期效果截图
• 当前效果截图

原导航栏组件来自11straps项目的navbar.njk文件。

修改后的代码 #

CSS #

.navbar {
  height: 50px;
}

.nvabar-brand {
  position: relative;
  z-index: 1;
}

HTML #

<nav class="navbar navbar-expand-lg fixed-top border-bottom navbar-light pt-0" style="background-color: #ffffff;">
  <div class="container">
    <a class="navbar-brand" href="{{ '/' | url }}"><img src="/img/Logo Placeholder.svg" alt="" width="50" height="100">
    </a>
    <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">
      <ul class="navbar-nav ms-auto mt-5 mb-2 mb-lg-0 text-center">
        <li class="nav-item me-1">
          <a class="nav-link" aria-current="page" href="{{ '/' | url }}">Home</a>
        </li>

        <li class="nav-item me-1">
          <a class="nav-link" href="{{ '/default' | url }}">Sample Page</a>
        </li>

        <li class="nav-item me-1">
        <a class="nav-link" href="{{ '/blog' | url }}">Sample Blog</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

修复方案 #

1. 实现Logo重叠显示 #

首先修正CSS拼写错误：nvabar-brand应为navbar-brand。然后通过负边距让Logo超出导航栏，同时确保导航栏不会截断Logo：

.navbar {
  height: 50px;
  overflow: visible; /* 允许内容超出导航栏范围 */
}

.navbar-brand {
  position: relative;
  z-index: 1;
  margin-bottom: -50px; /* 根据Logo高度调整，让Logo向下重叠 */
}

2. 移动端切换栏内容居中 #

当前ms-auto会让导航项始终靠右，改用响应式类ms-lg-auto，仅在大屏下靠右，移动端自动居中。同时调整导航项的上边距，避免大屏下间距过大：

<ul class="navbar-nav ms-lg-auto mt-lg-0 mt-3 mb-2 mb-lg-0 text-center">

3. 展开时推动主体内容 #

原fixed-top会让导航栏脱离文档流，无法推动下方内容。换成sticky-top即可让导航栏占据文档流空间，展开时自然推动主体内容：

<nav class="navbar navbar-expand-lg sticky-top border-bottom navbar-light pt-0" style="background-color: #ffffff;">

如果必须使用fixed-top，则需要给页面主体添加padding-top: 50px;（与导航栏高度一致），但sticky-top是更简洁的方案。

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