navbar - A logo and responsive navigation within the same line using bootstrap -

i trying use bootstrap make responsive navigation bar.

what want have logo on left side , navigation right beside logo.

i want each navigation (home, us, our services, contact us) have same width , fluid, if adjust screen size, navigation bar resize , logo stay same.

but whenever tried resize screen smaller size, navigation bar not in same line anymore.

normal screen size: https://www.dropbox.com/s/bl9s3m6ph79vrq0/1.png?dl=0

smaller screen size (navigation not on same line logo): https://www.dropbox.com/s/55cu1xyfi37rrp2/2.png?dl=0

css

.navbar-brand{ padding-top: 0; padding-left: 0px; padding-right: 15px; width: 18%; }  .navbar-header{ display: block;}  ul{ padding-top: 60px; }  .navbar-nav{ width: 80%; }   .nav li{ display: block; width: 25%; text-align: center; }  #logo_img{ width: 220px; } 

html

<nav class="navbar navbar-default">     <div class="container-fluid">          <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 id="logo_img" width="220" src="assets/logo.png"></a>         </div>          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">             <ul class="nav navbar-nav">                 <li><a href="#">home</a></li>                 <li><a href="#">about us</a></li>                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">our services <span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#">videography</a></li>                         <li><a href="#">design</a></li>                         <li><a href="#">training</a></li>                     </ul>                 </li>                 <li><a href="#">contact us</a></li>             </ul>         </div><!--end of collapse-->      </div><!--end of container fluid--> </nav> 

i found same condition me here bootstrap logo on same line navbar items still can't figure out wrong. before!

this css can use place image (remove img link navbar-brand , replace inside css).

.navbar-brand { width: 220px; height: 50px; background: url('http://placehold.it/220x85') no-repeat center center; background-size: 150px; } 

evenly spacing navbar links can done css , use of media queries aware if need add links can ugly , complicated.

see snippet.

.navbar {    border-radius: 0px;    border: transparent;  }  .nav li {    width: 150px;    text-align: center;  }  .dropdown-menu li {    text-align: left;  }  .navbar-brand {    width: 220px;    height: 50px;    background: url('http://placehold.it/220x85') no-repeat center center;    background-size: 150px;  }  .dropdown-submenu {    position: relative;  }  .dropdown-submenu > .dropdown-menu {    top: 0;    left: 100%;    margin-top: -6px;    margin-left: -1px;    -webkit-border-radius: 0px;    -moz-border-radius: 0px 6px 6px 6px;    border-radius: 0px;  }  .dropdown-submenu:hover > .dropdown-menu {    display: block;  }  .dropdown-submenu > a:after {    display: block;    content: " ";    float: right;    width: 0px;    height: 0px;    border-color: transparent;    border-style: solid;    border-width: 5px 0px 5px 5px;    border-left-color: #cccccc;    margin-top: 5px;    margin-right: -10px;  }  .dropdown-submenu:hover > a:after {    border-left-color: #ffffff;  }  .dropdown-submenu.pull-left {    float: none;  }  .dropdown-submenu.pull-left > .dropdown-menu {    left: -100%;    margin-left: 10px;    -webkit-border-radius: 6px 0px 6px 6px;    -moz-border-radius: 6px 0px 6px 6px;    border-radius: 6px 0px 6px 6px;  }  @media screen , (max-width: 992px) {    .nav li {      width: auto;    }  }  @media screen , (max-width: 768px) {    .nav li {      width: auto;      text-align: left;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  <nav role="navigation" class="navbar navbar-default">    <!-- brand , toggle grouped better mobile display -->    <div class="navbar-header">      <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle"> <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="#" class="navbar-brand"></a>      </div>    <!-- collection of nav links, forms, , other content toggling -->    <div id="navbarcollapse" class="collapse navbar-collapse">      <ul class="nav navbar-nav">        <li class="active"><a href="#">home</a>          </li>        <li><a href="#">profile</a>          </li>        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">messages <b class="caret"></b></a>            <ul role="menu" class="dropdown-menu">            <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> inbox</a>              </li>            <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> drafts</a>              </li>            <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> sent items</a>              </li>            <li class="divider"></li>            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> trash</a>              </li>          </ul>        </li>        <li><a href="#">hello</a>          </li>        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">things <b class="caret"></b></a>            <ul role="menu" class="dropdown-menu">            <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> inbox</a>              </li>            <li><a href="#"><i class="fa fa-pencil-square-o  fa-fw"></i> drafts</a>              </li>            <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> sent items</a>              </li>            <li class="divider"></li>            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> trash</a>                <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> profile</a>                  <ul class="dropdown-menu">                  <li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> account</a>                    </li>                  <li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o  fa-fw"></i> users</a>                    </li>                  <li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> login</a>                    </li>                </ul>              </li>            </li>          </ul>        </li>      </ul>    </div>  </nav>