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> 

Answer 2

I would suggest to position a second image at the top left of your page, that is only visible at the xs and sm breakpoints. Put this at the top of your code:

 <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt="" class="visible-xs visible-sm" />