CSS: exclude center navbar item from collapse menu

Question

I have a navbar with 5 elements, and the logo is in the center. When the screen size is < 769px and collapses, I would like the logo to be removed from the collpased menu, and appear on the top-left side of the page.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<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>
    </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">
        <img src="smallw_red_shaddow_small.jpg" 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>

Answer 1

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.

See example.

@media (min-width: 768px) {
  .navbar .navbar-brand {
    display: none;
  }
}

<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>