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

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 link：https://www.codeply.com/p/mBsxyw02Q3

打开溢出菜单（或 Bootstrap 语言的切换器）时 - 'Nav-brand' 与导航栏中的其他元素一起向上移动以显示隐藏的元素。

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

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

Answer 1

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

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

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

Navbar items don't stay fixed when I open the overflow-toggler

html

css

navbar

flexbox

twitter-bootstrap