当我打开溢出切换器时，导航栏项目不会保持固定

Question

前言 - 我不是在问“navbar-fixed-top”

我正在尝试制作具有自定义高度的简单导航栏。

HTML 代码：

<nav class="navbar navbar-expand-md">
    <div class="container-fluid nav-bar">
      <a class="navbar-brand" href="#">Navbar</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon">H</span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <a class="nav-link" href="#">HOME</a>
            <a class="nav-link" href="#">DESTINATIONS</a>
            <a class="nav-link" href="#">CREW</a>
            <a class="nav-link" href="#">TECHNOLOGIES</a>
          </div>
        </div>
      
    </div>
  </nav>

CSS 代码：

.navbar {
  background-color: orange;
  height: 72px !important;
}

a {
  color: #000;
}

这是 Codeply 链接：https://www.codeply.com/p/mBsxyw02Q3

当打开溢出菜单（或 Bootstrap 语言中的切换器）时，“导航品牌”以及导航栏中的其他元素会向上移动以显示隐藏的元素。

关于我的一些事情 - 我刚开始使用 Web 开发，所以我只知道一些关于 HTML 和 CSS 的知识。我知道这里的问题可能是由于脚本而发生的，但我不确定。所以让我知道这个问题是否可以用 CSS 以及如何纠正。如果不是，是不是和javascript有关？

当我打开汉堡菜单时，我检查了页面的填充或边距是否有任何变化，但没有任何变化，所以我有点不知道这里可能会发生什么。

Answer 1

您需要添加几行代码来解决此问题。

.navigation {
    background-color: orange;
    min-height: 72px !important;
}
.navbar-brand {
    min-height: 55px;
    line-height: 48px;;
}