html - Bootstrap Image Resize -

html - Bootstrap Image Resize -

ok, creating website bootstrap , have run issue. have placed image in nav bar in logo , go resize browser forcefulness mobile layout. when image should start re-sizing, drops below (or above) menu toggle before re-sizing.

i have tried adding .img-responsive no help.

here image of talking about:

and here code:

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="logo"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div class="text-center"> <h1>bootstrap starter template</h1> <p class="lead">use document way start new project.<br> text , barebones html document.</p> </div> </div><!-- /.container -->

any help appreciated thanks.

there several ways solve this. can utilize media queries set max-width or percentage width .navbar-brand.

the clearest solution might utilize css3 calc create take 100% width minus space menu button taking (22px width + 20px of padding + 2px of border + 15px of margin = 59px total space). , because image pushed downwards @ 390px screen width, media query should be:

@media (max-width: 390px) { .navbar-brand { width: calc(100% - 59px); } }

check jsfiddle result.

my other answer might help well.

html css twitter-bootstrap responsive-design