Bootstrap 3 navigation bar logo placement in center

Question

I wan my logo in center when the logo is collapsed, and the open wider screen as well is there any way/trick to do that, currently code looks like this and the logo appears on the left hand side which is not desired,

css of header,

     header
     {
        background-image: url("../images/header.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 150px;
     } 




 <header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
                <a href="javascript:void;"><img id="logo" src="images/logo.png"></a>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

And on placing logo in <li> it is shown in the center for the wider screen but it appears in collapse list on small screen. currently it looks like this,

Answer 1

I'm not sure to understand everything, but I will start by duplicating the logo.

First logo :

This one is for small devices, and is placed in your .navbar-toggle element.
You'll need to add a few CSS lines to center it.

Second logo :

This one is for larger devices, and is placed in your list of links.
You must add .hidden-sm and .hidden-xs classes to the <li> element, to avoid getting it in your collapsed list (on small devices)

<header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <img class="logo" src="http://placehold.it/95/3498db/fff">
                </button>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden-xs hidden-sm"><a href="#" class="logo-link"><img class="logo" src="http://placehold.it/95/3498db/fff"></a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

@media (max-width: 768px) {
    .navbar-header {
        text-align: center;
    }
    .navbar-toggle {
        float: none;
    }
}

Bootply

Note : I would recommand to avoid inline style.

Answer 2

The trick is by CSS - In media Query, for smaller screen, hide this logo.

@media (max-width: 600px) {
  li.className{
   display: none;
  }
}