Bootstrap 3 Responsive Logo Image

HTML & CSS
1

Let’s say that I have a logo image which is 400px in width and it goes into the top navigation bar similar to this example site:

But when resizing the browser window to be a mobile width in size the 400px logo image drops beneath the navigation. Is there any way to keep a responsive logo on the top left side of the screen in Bootstrap 3, to be as big as it can be (up to it’s maximum 400px) while still retaining it in the top left corner of the screen? And when resizing the browser window to be smaller it still stays to the left of the navigation (shrinking responsively if necessary) and to the left side of the mobile menu bar too? Also, let’s say that I add some more navigation buttons, will any CSS code need to be altered when that is done or will the responsive logo keep itself to the left side of the screen and not drop below the navigation bar?

Hope that makes sense! And I’m hoping this can be achieved in a responsive fashion for Bootstrap 3.
Thanks,

2

Hi,

You’ll have to put up a demo if you want specific help but using that page you linked to as an example you can add this code:


.logo-nav{display:block;width:100%;}
.logo-nav img{width:400px;max-width:100%}

Use css terminal or Firebug to add that code to the live site to test it out.

That will leave the logo at 400px width until there isn’t room and then it will scale smaller.