Logo overlap in bootstrap twitter navbar

Question

I want to make my logo overlap my navbar but i dont know how. I tried to increase the size of the picture but that didn't work out, the navbar just enlarged. I also want it to be in the same div class because else it won't be nice on the mobile version of the site. I'll add pictures of what it looks like and what i want it to be and the code. Thanks in advance

Code: <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand"> <a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a> </div> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand"> <a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a> </div>

Answer 1

give your logo a class of "logo" then add:

.logo {
 position: fixed;
 top: 1em;
 left: 1em;
 display: inline;
}

fix your nav bar as well.

Hope that helps!

Answer 2

Just put the logo outside the nav bar div. And align it top:0px left:0px.

Or if you want the logo on the left at all times then just float it left.