Jay Jay - 3 years ago 159
CSS Question

Bootstrap logo isn't responsive

If I shrink my screen size, the logo will either be very small and work on mobile phones or very large and work on desktops and looks BLURRY. How can I get the logo to be fluent on all screen sizes, including tablets? The logo size is 793 x 150 pixels, it is a wide logo. This size is just what is uploaded on the server, of course it is a lot smaller on the actual site so it fits in the navbar.

The logo is added in HTML like this:

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example"></a>


header .navbar-brand {
padding-top: 7px;
padding-bottom: 7px
header .navbar-brand>img {
height: 46px
header .navbar-brand>img {
height: auto;
width: 135px

Answer Source

Add the img-responsive class to img tag. And set a specific width to anchor tag if needed.

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example" class="img-responsive"></a>


.navbar-brand {
   max-width: 60px;

The class img-responsive applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Read more about it here:


Looking at your site do the following changes:

Remove codes from

custom.css line 699

header .navbar-brand > img {
   height: 200px;

style.css 5105

.navbar-brand > img {
    display: block;

Use this:

style.css 2091

.navbar-brand {
    float: left;
    padding: 12px 15px;
    font-size: 19px;
    line-height: 21px;
    height: 62px;
    max-width: 200px;
    display: table;

Edit the html:

<a class="navbar-brand" href="http://soldmymac.com/"><span><img src="http://soldmymac.com/resources/imgs/logo.png" alt="Sold My Mac" class="img-responsive"></span></a>

And add the css:

.navbar-brand span {
   display: table-cell;
   vertical-align: middle; // This will keep the logo vertically in the middle


enter image description here

And one last thing....


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download