Preventing navbar resizing on websites

I'm trying to have a section on the navbar dedicated for text or alerts that appear based on certain events. However, even when the alert is hidden, it still affects the height of the navbar. How can I resolve this issue?

It may be difficult to see in the images, but there is a noticeable difference between the popup and when it's closed.

This is utilizing the most recent version of 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d415d40">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8b8e95928fbf98939f92">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

edit: updated css and bootstrap version

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Even when the alert is not visible, it seems to have an impact on the layout. The alert includes a margin of 1rem at the bottom, making the entire height of the alert 90px. However, the default space available for the navigation is less than 90px, causing the navigation to expand in order to accommodate the alert. This can be observed by the yellow area (margin) in the provided image.

https://i.sstatic.net/2BvN4.png

The unexpected increase in height of your navigation without the alert present could be attributed to the navbar-brand class having additional padding, possibly from bootstrap. This extra padding can be seen in the purple area (padding) shown in the image.

https://i.sstatic.net/MpfRb.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Twitter Bootstrap Modal for Rails form submissions with AJAX/JSON

I'm encountering a challenge with integrating a Rails form_for form into a Bootstrap modal and updating a table using AJAX. I've attempted to follow the guidance provided at , but without success. I have also explored the suggestions in the resou ...

ajaxjsonruby-on-rails-3twitter-bootstrap

Personalized CSS styling for Jquery Mobile version 1.3

Having trouble with styling a page in jquery using CSS, specifically aligning #navgroup to the center of the footer and removing an additional white counter from the slider. Here is my code: <!doctype html> <html lang="en> <head> < ...

jquerycssjquery-mobilejquery-mobile-navbar

Tips to position two shortcode elements next to each other horizontally

I have some code here and I am looking to align the two elements at the bottom, "php echo do_shortcode(wcas-search-form);" and "php do_action('hamzahshop_custom_min_cart');" on the same line horizontally. I am new to this and struggling to figure ...

phphtmlcsswordpresswoocommerce

Incorporating hyperlinks within the navigation buttons

I'm working on a design where I have six buttons that need to be displayed on top of a background image. How can I ensure that the text inside the buttons stays contained within them? Here is the current code structure I am using, which involves utili ...

cssalignment

Modify the HTML input type color in React.js only after releasing the mouse button

<input className="color-palatte" type="color" onChange={(e) => onColorChange(e)} /> When interacting with the color palette, I have set up an API call to trigger only when I release the slider instead of continuous calls while sliding over the co ...

htmlreactjseventsinputcolors

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...

htmlcsshoverz-index

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Navigating a roster of users in JavaScript

I'm dealing with a collection of user data stored in an array accountsade: [ { id: 0.4387810413935975, name: "Adrian", password: "345", userName: "nathanael" }, { id: 0. ...

javascripthtmlauthenticationfrontend

What is the best way to horizontally center an absolute button within a div?

I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach: .mc-item { background: #F0F0F0; border: 1px solid #DDD; height: 1 ...

htmlcsstwitter-bootstrapbootstrap-4

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

javascripthtmlreactjs

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

cssangularjshtmltwitter-bootstrap

What is the best way to incorporate a confirmation model prior to accessing a dynamically generated link within a Jinja2 template?

I need assistance with deleting a record from an HTML table created within a Jinja2 template. I want to implement a confirmation prompt before proceeding with the deletion process. My development environment includes Bootstrap5. The current functionality ...

htmljinja2crudbootstrap-5

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

htmlcss

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

javascripthtmlcss

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

cssfont-size

The body and HTML elements are bloated with an excessive amount of

Before we dive in, check out this code pen. CSS <body> <div class="header"> <img src="https://images.unsplash.com/photo-1586244439413-bc2288941dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cro ...

htmlcssgoogle-chromewebsass

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Hey everyone! I'm a beginner in web development and I'm struggling to understand why the event "OnKeyDown" is triggered the second time. My task involves changing (increasing, decreasing) parts of a date (day, month, year, hour, minutes, seconds) ...

javascripthtmlreactjskeydown

Running a Node.js child process upon clicking an HTML button

I need to create a basic webpage where clicking a button will open the command prompt. This is my goal. Below are the HTML and Node.js code snippets. test.html <html> <head> </head> <body> <p>guru</p> <form a ...

htmlnode.jsreactjs