How to stop navbar from changing size - html

Question

Basically have the right section of the navbar reserved for text/an alert that will be placed there depending on if certain things happen. But, the alert, even when invisible, changes the height of the navbar. How do I fix this?
It might be hard to tell with the images but there's definitely a difference with the popup and when it's closed.
This is using the latest bootstrap v5.2.3
.navbar-brand img {
height: 50px;
width: 50px;
}
.alert svg {
height: 20px;
width: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" />
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/100" alt="Bootstrap" width="30" height="24">
</a>
<span class="navbar-text text-dark" id="wallet_address">
<div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
<strong>ERROR!</strong> No Wallet detected.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</span>
</div>
</nav>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
edit: updated css and bootstrap version

Answer 1

It doesn't look like the alert is affecting anything while it's invisible. The alert has 1rem of margin on the bottom, which calculates out to make the entirety of the alert 90px tall. The available space of the nav by default is less than 90px, so including the alert in that space forces the nav to expand to accommodate the alert. Note the yellow area (margin) in the image.
The reason your nav has a height larger than expected when the alert is missing is because the navbar-brand class has some top and bottom padding, probably coming from bootstrap. Note the purple area (padding) in the image.