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

Question

Preface - I am not asking about "navbar-fixed-top"

I am trying to make simple Navbar with a custom height.

HTML code:

<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 code:

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

a {
  color: #000;
}

Here's the Codeply link: https://www.codeply.com/p/mBsxyw02Q3

When opening the Overflow menu (or toggler in Bootstrap language) - the 'Nav-brand' along with other elements in the Navigation bar displace upwards to show the hidden elements.

Something about me - I just started out Web Dev, so I just know a handful of things about HTML and CSS. I understand that the issue here maybe happening because of script, but I am not sure. So let me know if this issue can be corrected with CSS and how. If not, is it related to javascript?

I have inspected the page for any changes in padding or margin when I open the hamburger menu, but there's no changes so I am kind of out of idea what might be happening here.

Answer 1

You need add few lines of code to resolve this issue.

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