Rectangle 27 0

html CSS: exclude center navbar item from collapse menu?


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-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="#block-one">
        <img src="http://placehold.it/350x150/f00" width="152" height="20" alt="" />
      </a>

    </div>
    <div class="row collapse navbar-collapse" id="collapsible-navbar">
      <div class="col-sm-2 text-center">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">1</a>

          </li>
          <ul class="dropdown-nav row clients">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-left">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a>

          </li>
          <ul class="dropdown-nav row locations">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-4 text-center logo hidden-xs">
        <img src="http://placehold.it/350x150/f00" width="152" height="75" alt="" />
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a>

          </li>
          <ul class="dropdown-nav row information">
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">5</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">6</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">7</a>

            </li>
            <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">8</a>

            </li>
          </ul>
        </ul>
      </div>
      <div class="col-sm-2">
        <ul class="nav navbar-nav navbar-right">
          <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a>

          </li>
          <ul class="dropdown-nav row sign_in">
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a>

            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a>

            </li>
            <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a>

            </li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</nav>
@media (min-width: 768px) {
  .navbar .navbar-brand {
    display: none;
  }
}

The simplest solution would be to place both images where you want them an use display properties to show and hide them at media queries.

Note