Bootstrap 4定义导航栏高度后navbar-toggler点击位置偏移问题

问题重现 #

你遇到的情况是：在Bootstrap 4中，给自定义类.navbar-custom设置固定height后，点击navbar-toggler汉堡按钮时，按钮位置会发生偏移；而不设置高度时，按钮点击后位置保持正常。

你的代码如下：

HTML #

<nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow"> 
  <div class="container"> 
    <button class="navbar-toggler hamburger-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
    </button> 
    <div id="navbarSupportedContent" class="collapse navbar-collapse"> 
      <ul class="navbar-nav mx-auto"> 
        <li class="nav-item"> 
          <a class="nav-link smooth-slow" href="">Link</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link smooth-slow" href="">Link</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</nav>

CSS #

.navbar-custom { 
  /* height: 80px; */ 
  background-color: #FDC529; 
  font-family: "Roboto Condensed", sans-serif; 
  border-width: 0 0 1px; 
}

原因分析 #

Bootstrap 4的导航栏（.navbar）默认采用Flexbox布局，核心属性是：

.navbar {
  display: flex;
  align-items: center;
  min-height: 56px;
}

这个布局的作用是让导航栏内部的所有元素（包括汉堡按钮、菜单内容）垂直居中对齐。

当你给.navbar-custom设置固定height:80px后，导航栏的高度被强制固定，但是点击汉堡按钮展开菜单时，.navbar-collapse的内容会显示出来，此时导航栏的总内容高度会超过你设置的80px。由于Flexbox的align-items:center属性，汉堡按钮会和展开的菜单内容一起尝试在固定高度的容器内垂直居中，最终导致按钮位置向下偏移，同时菜单内容会溢出导航栏容器。

解决方案 #

这里提供两种常用的解决思路，你可以根据需求选择：

方案1：用min-height代替固定height（推荐） #

这是最符合Bootstrap设计理念的方案，既保留了导航栏的最小高度，又允许导航栏在菜单展开时自动调整高度，避免内容溢出和按钮偏移：

.navbar-custom { 
  min-height: 80px; /* 替换height为min-height */
  background-color: #FDC529; 
  font-family: "Roboto Condensed", sans-serif; 
  border-width: 0 0 1px; 
}

优点：完全适配Bootstrap的原生布局逻辑，不会引入额外的定位问题，菜单展开后导航栏高度自适应，内容不会溢出。

方案2：给汉堡按钮设置固定垂直定位（适合必须固定导航栏高度的场景） #

如果你的需求必须保持导航栏的固定高度，可以通过绝对定位让汉堡按钮始终垂直居中在导航栏内，不受菜单展开的影响：

.navbar-custom { 
  height: 80px;
  background-color: #FDC529; 
  font-family: "Roboto Condensed", sans-serif; 
  border-width: 0 0 1px; 
  position: relative; /* 给父容器添加相对定位，作为按钮绝对定位的参照 */
}

.navbar-toggler {
  position: absolute;
  top: 50%;
  right: 1rem; /* 保持和容器右侧的间距，可根据需要调整 */
  transform: translateY(-50%); /* 通过 translateY 实现精确垂直居中 */
}

优点：严格保持导航栏的固定高度，汉堡按钮位置始终稳定；缺点：需要额外处理菜单展开后的内容溢出问题（比如给导航栏添加overflow-y:auto让菜单内容可滚动）。

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