Need to change .navbar-brand at (xs)

[Reshleman]

I have a logo where the height is a little to much for mobile so I'm wanting to change it completely at xs. I'm pretty sure this can be done in source code but I can't figure it out. I've searched here and google with no luck. Do I need to hide the element at xs and add the smaller logo? Hopefully this made sense.

Thanks,

Tim

[osgood_]

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;

}

}

[Reshleman]

Thank you for the detailed response, osgood_. I am actually wanting to change the logo/image entirely at (max-width: 576) not adjust the height of existing logo at certain media queries. Yes, I am using Bootstrap 4 default navbar. Sorry if I wasn't clear.

[osgood_]

Use srcset, the browser will then select the correct image at 576 width:

<a class="navbar-brand" href="#">

<img src="logo_1024.png.jpg" alt="Brand Name"

srcset="logo_1024.png 1024w,

logo_576.png 576w"  />

</a>

You'll still need to include the below css selectors to control the height of the image unless your image is correctly sized at source.

.navbar-brand  {

display: flex;

align-items: center;

width: 30%;

}

.navbar-brand img {

max-width: 100%!important;

height: 45px;

}

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

.navbar-brand img {

height: 35px;

}

[Reshleman]

Thank you for the responses. I wound up using Nancy's link and it worked in my situation. Thanks again.

[osgood_]

Reshleman  wrote

Thank you for the responses. I wound up using Nancy's link and it worked in my situation. Thanks again.

Ok, technically that is incorrect because both images will be downloaded by the mobile device, just one is being hidden but its still draining bandwidth. For a logo not too much to worry about but if youre thinking about deploying it for larger images you may wish to re-consider tactics, many dont including myself sometimes - its a lazy way just to hide images unless you are going to use them at that device width.

Srcset, which is now well supported by browsers, only delivers the one and correct image, the rest don't get downloaded.

[Nancy OShea · Accepted solution]

Hidden display classes in Bootstrap 4

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

[phillipt91434251]

Thank you so very much