Bootstrap 3 Navbar With Logo

add logo image to bootstrap navbar

Put a dot before the source of the image file.
Sample Image
Results

Sample Image

I think. You are not able to pick up photo from your system as code works fine run snippet below:

<div class="container">
        <a class="navbar-brand" href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTW6509Xrnys2Pp_8RB3ffNOsqDrKlPtkvkRQ&usqp=CAU" alt="Sample Image" width="30" height="24">
</a>
</div>

Vertical align logo inside .navbar-brand with Bootstrap 3

You could add some custom style and set display: flex and align-items: center on navbar-brand element.

.navbar-brand {  display: flex;  align-items: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-fixed-top navbar-default" role="navigation">  <div class="container-fluid">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">      <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>            </button>      <a class="navbar-brand" href="#">         Company Name <img src="http://via.placeholder.com/220x36">      </a>    </div>  </div></nav>

Bootstrap 3 navbar below logo

Add float: initial; to the navbar-header class

Bootstrap 3, how to create a navbar with a brand image and two rows of links?

Let's start with the Default navbar from the Bootstrap's documentation.

Turn the brand image into a simple non-floating block.
Leave an empty space on the right side only.
Wrap all menu items into one <ul></ul> but make them higher.
Force the 5th element to start new line. ~~Clear a mind, open a heart~~. All items are left-floating, so clear: left; will be enough.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-brand {  display: block;            /* 1. */  float:   none;  height:  auto;  margin:  0 !important;     /* 2. */  padding: 0 20px 0 0;}
@media (min-width: 768px) {  .navbar-nav>li>a {         /* 3. */    line-height:    21px;    padding-top:    22px;    padding-bottom: 22px;  }
  .clear-left {              /* 4. */    clear: left;  }}

<nav class="navbar navbar-default">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#"><img src="//placehold.it/308x130/c69/f9c/?text=Brand" alt="Sample Image"></a>    </div>    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link 1</a></li>        <li><a href="#">Link 2</a></li>        <li><a href="#">Link 3</a></li>        <li><a href="#">Link 4</a></li>        <li class="clear-left"><a href="#">Link 5</a></li>        <li><a href="#">Link 6</a></li>        <li><a href="#">Link 7</a></li>        <li><a href="#">Link 8</a></li>      </ul>    </div>  </div></nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

bootstrap 3 - navbar brand responsive not working

Technically the nav button is still there but because the nav element doesn't have the .navbar-default class, it isn't inheriting Bootstrap's styles. You can fix this by adding the following:

CSS

.navbar-toggle {
    border-color: #ddd;
    top: 37px;
}

.navbar-toggle .icon-bar {
    background-color: #888;
}

You'll also need to add jQuery and Bootstrap js to enable the nav toggle for the menu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

To fix the image you'll need to do the following (styles may need adjusting based on how you need it to look)

You can set the height of .navbar-brand to auto and remove the height from .navbar. Also, changing its box-sizing to content will allow the image to sit within the padding of the element. You'll then need to add the .img-responsive class to the logo image element.

CSS

.navbar-brand {
    box-sizing: content-box;
    height: auto;
}

@media (max-width: 767px) {
    .navbar-brand {
        max-width: 15em;
    }
}

/* Optional to replace line-height centering */ 
@media (min-width: 768px) {
    .nav {
        position: relative;
        top: 60px;  /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
    }
}

HTML

<!-- Add img-responsive class to your logo -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
        <img alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />
    </a>
</div>

Here's a Codepen example: https://codepen.io/raptorkraine/pen/YrKMgg

Center bootstrap navbar brand logo

You can try this.

What I did is I created a div(.navbar-logo) that will enclose the .navbar-brand then apply Flexbox to center the logo.

then I implement some CSS to .navbar-toggle to make it positioned.

then set width to .navbar-header to make the alignment in desktop view.

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');body,html {  height: 100%;  margin: 0;}
/*=======================================================Header, footer and navbar========================================================*/
.navbar-logo{  display:flex;  justify-content:center;  align-items:center;  height:50px;  width:100%;}
.navbar-toggle{  position:absolute;  top:5px;  right:5px;}
.navbar-header{  width:100%;}
.navbar .navbar-nav {  display: inline-block;  float: none;  margin-top: 2em;  font-family: 'Ubuntu', sans-serif;  font-weight: 400;  font-style: normal;  letter-spacing: 5px;  text-transform: uppercase;  font-size: 14px;}
.navbar {  position: relative;}

.navbar-shrink .navbar-nav {  display: none;}
.navbar-shrink.navbar {  height: 6em;}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {  width: 250px;  height: 44px;}
.navbar-default .navbar-nav>li>a {  color: #fff;  font-weight: 300;}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>.active {  color: #808ba0;}
.navbar-default .navbar-nav>li>a:hover {  color: #808ba0;  font-weight: 300;}
#navbar-header {  transition: 2s ease-in-out;}
.navbar-default {  background-color: rgba(51, 55, 65, 0.9);}
.navbar-default.navbar-shrink {  background-color: rgba(51, 55, 65, 0.9);}
.navbar {  position: relative;  border-radius: 0px;  border: 0px;  height: 10.5em;  -webkit-transition: height 300ms ease-in-out;  -moz-transition: height 300ms ease-in-out;  -o-transition: height 300ms ease-in-out;  transition: height 300ms ease-in-out;}
.navbar-fixed-top {  position: fixed !important;}
.navbar-brand img {  width: 250px;  height: 44px;}
.nav {  text-align: center;}
.navbar .navbar-collapse {  text-align: center;}
.dropdown:hover .dropdown-menu {  display: block;  margin-top: 0;}
.mq-footer {  text-align: center;  font-family: 'Ubuntu', sans-serif;  padding-bottom: 2em;}
.mq-footer>.container>#footer-copyright {  font-size: 12px;  color: #737373;}
.footer-icon {  font-size: 25px;  color: #737373;  opacity: 0.5;  padding-top: 1em;  padding-right: 0.25em;}
.footer-icon:hover {  opacity: 1;  cursor: pointer;}
#footer-copyright {  margin-top: 2em;}
#footer-links {  margin-top: 2em;}
#footer-links ul {  padding-left: 25px;}
#footer-links ul li {  display: inline;  margin-right: 25px;}
#footer-links ul li a {  color: #333741;}

<div class="header" id="navbar-header">  <div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">    <div class="container">      <div class="navbar-header">        <div class="navbar-logo">        <a class="navbar-brand" href="/">              <img src="http://marquesslondon.herokuapp.com/images/logo.daa5186d.png">        </a>        </div>        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">              <span class="sr-only">Toggle navigation</span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>              <span class="icon-bar"></span>            </button>      </div>      <div style="display: block">        <div class="collapse navbar-collapse" id="js-navbar-collapse">          <ul class="nav navbar-nav" id="navbar">            <li><a href="/">HOME</a></li>            <li class="dropdown">              <a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>              <ul class="dropdown-menu">                <li><a href="/process">Process</a></li>                <li><a href="/look">Our Look</a></li>              </ul>            </li>            <li><a ng-href="/lifestyle">LIFESTYLE</a></li>            <li><a ng-href="/story">STORY</a></li>            <li><a ng-href="/contact">GET IN TOUCH</a></li>          </ul>        </div>      </div>
    </div>  </div></div>

bootstrap navbar with company logo at the top

@Mandar Patil, I've linked to a codeply project that should meet your requirements.

For the brand on the collapsed navigation menu, you can just use bootstraps visible and hidden utility classes, and specify the appropriate breakpoints.

HTML

<div class="container hidden-xs visible-sm visible-md visible-lg">
    <div class="row">
        <div class="col-12">
            <a class="navbar-brand" href="#">COMPANY LOGO</a>
        </div>
    </div>
</div>

...

       <div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <button type="button" class="navbar-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#" style="color: white;">COMPANY LOGO</a>
        </div>

Bootstrap with navbar logo

Try

in the markup

<img class="img-responsive logo" src="logo.jpg" alt="Sample Image">

and in the css

.logo {max-width:150px; /* Adjust accordingly */ }

and add padding/margin to the sidebar.