Logo not suitable for download

Question

I am trying to resize the image in my navigation mode to a larger size.

However, by doing this, navbar gets an irregular shape.

I have the code here: http://www.bootply.com/941lMP3fj6#

The problem may be that the image is in an anchor tag. But not sure.

Answer 1

Try:

.navbar-brand { padding-top: 0; } 

Job: http://www.bootply.com/cCg5FvZyZP

Answer 2

Add this to your styles:

 .navbar-brand { margin: 0; padding: 0; { .navbar-brand img { max-height: 100%; } 

http://www.bootply.com/rAzwwIbCBI

Answer 3

You need to adjust the height of the navigation bar.

You can use this variable in LESS to adjust the height, and it will center the navigation bar vertically and include all the necessary additions:

 @navbar-height 

50px by default.

To set this up in plain CSS, you need to change the min-height of .navbar and the height of the navbar-fixed-top , and then adjust the margins of .navbar-nav .

Here's how the top should be structured (the title bar of the navigation bar is missing):

  <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" rel="home" href="/" title="www.site.nl"> <img src="//placehold.it/200x51"> </a> </div> 

Bootply example: http://www.bootply.com/tOoeM8o8Om

Answer 4

 <div class="container"> <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar navbar-collapse collapse navbar-responsive-collapse"> <div class="pull-left" style="margin-right: 15px;"> <a rel="home" href="/" title="www.site.nl"> <img src="//placehold.it/200x51"> </a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul> <!-- end nav--> <ul class="nav navbar-nav pull-right"> <li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong> Select language</a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="">NL</a></li> <li><a href="">IL</a></li> <li><a href="">ENG</a></li> </ul> </li> </ul> <!-- end nav menu right --> </div> <!-- end nav-collapse --> </div> 

Place your logo inside the container.

The above code works!

Check and let me know if you have a problem!