How to stop navbar from changing size

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

size with alert

size when alert is closed

.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

When you ask something involving `html` and `css` on Stack Overflow, it's easier to get an answer if you make a reproducible example on CodePen, because we can't tell by looking at it what those classes do. Here is the link: https://codepen.io/pen/. — Rohling, Dec 15 '22 at 22:01
Make sure the wrapper ( ` id="wallet_address"` ? ) is set to `display: none` and not `visibility: hidden` — Cooleronie, Dec 15 '22 at 22:13
@Rohling, snippet demos are easily created _here_ using the editor. No need to send us elsewhere. — isherwood, Dec 15 '22 at 22:16
Does the demo above show the problem? Please revise as necessary so it does. — isherwood, Dec 15 '22 at 22:21
@Cooleronie that's fine but when i set it back to block it changes the navbar size — ya idk what i'm doing, Dec 15 '22 at 22:40
Does this answer your question? [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles) — Jason, Dec 16 '22 at 09:00

score 0 · Answer 1 · answered Dec 15 '22 at 23:02

0

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.

answered Dec 15 '22 at 23:02

Jason

129
1
9

how would i fix this then? removing the padding from the brand and/or the alert didn't change anything – ya idk what i'm doing Dec 16 '22 at 00:14
If you inspect the elements, you can see that the unwanted padding and margin are coming from the `navbar-brand` class for the image, and from the `navbar-text` class for the alert. You would think that you can easily apply styling to these classes to override them, but that's not the case. See this SO question for more info: https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles – Jason Dec 16 '22 at 00:20

How to stop navbar from changing size

1 Answers1