Need to change .navbar-brand at (xs)

By default the Bootstrap navbar is only about 60px high (joke) - like everyone wants a logo less than 60px high.

Anyway If you ARE using the default Bootstrap navbar then add the below Bootstrrp class selectors to your css styles NOT in the Bootstrap.css default file (you never alter that)but in a linked css stylesheet AFTER the link to the Bootstrap.css file or copy them and paste them directly before the closing </head> tag in your pages code and surround the css selectors with style tags - <style> CSS SELECTORS GO HERE  </style>

You can then alter the height of the image in the 768px and 480px media queries. Below the height is set to 35px and 25px. You can add as many media queries as you like to adjust the height of the image at different broswer widths.

Obviously you DO NOT declare any height in the actual img tag, example below:

<img src="logo.png" alt="My Company Name"  />

.navbar-brand  {

display: flex;

align-items: center;

padding: 0;

}

.navbar-brand img {

max-width: 100%!important;

height: 45px;

}

@media screen and (max-width: 768px) {

.navbar-brand img {

height: 35px;

}

}

@media screen and (max-width: 480px) {

.navbar-brand img {

height: 25px;

}

}