CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sanders
sanders

Reputation: 10888

Logo doesn't fit in bootstrap navbar

I am trying to change the image in my naviation to a larger size.

However by doing this the navbar get's malformed.

enter image description here

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

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

Upvotes: 6

Views: 20170

Answers (4)

Aibrean
Aibrean

Reputation: 6412

You need to adjust the height of the navbar.

You can use this variable in LESS to adjust the height and it will center the navbar vertically and include all necessary padding:

@navbar-height

50px is the default.

How to adjust this in regular CSS is to change the min-height of .navbar and the height of navbar-fixed-top and then adjust padding of .navbar-nav.

This is how the top part should be structured (missing navbar-header):

    <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>

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

Upvotes: 2

Raja Sekar
Raja Sekar

Reputation: 2130

<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>

Put your logo inside the container.

The above code works!!

Check and let me know if you have any issues!!

Upvotes: 1

Luke
Luke

Reputation: 4063

Add this to your styles:

.navbar-brand
{
    margin: 0;
    padding: 0;
{

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

http://www.bootply.com/rAzwwIbCBI

Upvotes: 4

George G
George G

Reputation: 7695

Try:

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

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

Upvotes: 14

Related Questions