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

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;;
}