Bootstrap Logo Not Fitting In Navbar

Question

I have a test site at http://pawfamily.tk/~shivampaw/primahc.com/

The logo isn't fitting no matter what I do. I've looked around for ages. Tried changing the padding to 0, margin to 0, resized it but then it doesn't fit on my iPhone properly.

I want the logo to be on the left all the time and obviously I don't want it tiny. I also want it on the left on mobile as well.

How can I go about achieving this?

This is my navbar code:

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">

            <a class="navbar-brand" href="#">
                    <img class="img-responsive" style="" src="images/logo.png" alt="Prima Healthcare">
            </a>
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <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>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li <?php echo $home; ?>>
                        <a href="index.php">Home</a>
                    </li>
                    <li <?php echo $b2b; ?>>
                        <a href="b2b.php">Business to Business</a>
                    </li>
                    <li <?php echo $contact; ?>>
                        <a href="contact.php">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

Thank you!

Answer 1

It seems the .navbar-brand property doesn't work well with oversized images. I have managed to accomplish the goal by simply removing the .navbar-brand property and adding the .pull-left property to the image to make display inline with the content on the right like so:

<a href="#">
    <img class="img-responsive pull-left" src="images/logo.png" alt="Prima Healthcare">
</a>

If you do not plan on making the image clickable, I would even go as far to remove the anchor tag completely.

Answer 2

I would override the .navbar-brand. You can use media queries to define different width values for different screen sizes.

The image will be 200px for small screens and will scale up to 250px for larger screens. You can change the numbers.

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    width: 200px;
}

@media only screen and (min-width : 768px) {
    .navbar-brand img {
        width: 250px;
    }
}

Fiddle here: https://jsfiddle.net/DTcHh/16983/