Bootstrap 3 Navbar with 3 column. Left for Logo, Center for Menu and Right for Social Icon

Question

Its seems like default bootstrap navbar unable to generate this kind of navbar.

Which are left, center and right.

The problem come when I want to centering the menu. For left and right navbar should be no problem with me.

I tried some example in stackoverflow, the menu centered but it will push the navbar-right to bottom.

Please advice what should I do?

Attached is the screenshot :-

I want to center the menu between brand (red box) and social icon on the right.

Kindly, find my jsfiddle below :-

http://jsfiddle.net/t5644/3/

Below are my codes :-

.navbar-default {
  background-color: white;
  border-color: white;
  margin: 0; }
  .navbar-default .navbar-brand {
    color: black;
    padding-left: 35px; }
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: black; }
  .navbar-default .navbar-text {
    color: black; }
  .navbar-default .navbar-nav > li > a {
    font-family: "FuturaStd-Light";
    font-size: 13px;
    line-height: 40px;
    color: black; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: black; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: black;
    background-color: white; }
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: black;
    background-color: white; }
  .navbar-default .navbar-toggle {
    border-color: white; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: white; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: black; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border: none; }
  .navbar-default .navbar-link {
    color: black; }
    .navbar-default .navbar-link:hover {
      color: black; }
  .navbar-default .navbar-right {
    padding-right: 35px; }
    .navbar-default .navbar-right .icon {
      color: #c1c0c0;
      font-size: 18px;
      margin-left: 30px;
      padding-top: 25px; }
  .navbar-default .dropdown-menu > li > a {
    font-family: "FuturaStd-Light";
    font-size: 13px;
    padding: 15px; }
  .navbar-default .navbar-center {
    margin: 0 auto; }

@media (min-width: 768px) {
  .navbar-nav > li > .dropdown-menu {
    margin-top: -10px; }

  .dropdown-menu-bar {
    height: 5px;
    background: #ff6319;
    margin-top: -25px;
    box-shadow: none !important; } }
@media (max-width: 767px) {
  .navbar-default {
    margin-bottom: 20px; }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: black; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
      color: black; }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: black;
    background-color: white; }

<nav role="navigation" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#ricecomms-nav" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar">&nbsp;</span>
                <span class="icon-bar">&nbsp;</span>
                <span class="icon-bar">&nbsp;</span>
            </button>
            <a href="#" class="navbar-brand">
                <img src="/media/img/header-logo.png" />
            </a>
        </div>

        <div class="collapse navbar-collapse" id="ricecomms-nav">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">ABOUT US</a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">INDUSTRIES</a>
                    <ul class="dropdown-menu">
                        <div class="dropdown-menu-triangle hidden-xs">
                            &nbsp;
                        </div>
                        <div class="dropdown-menu-bar hidden-xs">&nbsp;</div>
                        <li>
                            <a href="#">Technology</a>
                        </li>
                        <li>
                            <a href="#">Corporate</a>
                        </li>
                        <li>
                            <a href="#">Consumer</a>
                        </li>
                        <li>
                            <a href="#">Professional Services</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">SERVICES</a>
                </li>
                <li>
                    <a href="#">INSIGHTS</a>
                </li>
                <li>
                    <a href="#">CAREERS</a>
                </li>
                <li>
                    <a href="#">CONTACT US</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <i class="icon ion-social-facebook">&nbsp;</i>
                </li>
                <li>
                    <i class="icon ion-social-twitter">&nbsp;</i>
                </li>
                <li>
                    <i class="icon ion-social-linkedin">&nbsp;</i>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

It's work for my

.navbar-nav {
    float: left;
    margin: 0;
    margin-left: 40%; 
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px;
    margin-left: 0;
}

margin-left adjust for each case, for more information go Bootstrap 3: Align navigation to center

Answer 2

Try this:

Hope this may helpful:

        @media (max-width: 767px) {
        .navbar-nav {
    float: left;
    margin: 0;
    margin-left: 40%; 
}

            .navbar-nav.navbar-right:last-child {
                margin-right: -15px;
            }
        }