Media Queries & Bootstrap Show / Hide Site Logo

I want  my logo to appear as it normally does on the desktop but to disappear from the opened collapsed menu on mobile devices. However, I also want the logo to appear, centered above the opened menu on mobile devices. Here’s how I adapted the Bootstrap, LESS and CSS to accomplish that.

Here’s the placement of the logo in the nav header menu:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="head_logo">
      <img class="head_logo" src='images/logo.png' alt='Mike&rsquo;s Website Resonsive Renovation and Business Intelligence' width='134'>
   </li>

with the CSS and media query in the LESS file that triggers the collapse to three bars.

.container > .navbar-header,
.container > .navbar-collapse {
   margin-right: -@navbar-padding-horizontal;
   margin-left: -@navbar-padding-horizontal;
   @media (min-width: @grid-float-breakpoint) {
      margin-right: 0;
      margin-left: 0;
 }
}

In order to show the logo on the desktop but not show it on mobile devices, I use the following CSS with a media query that shows the logo at 1190px and hides it when the collapsed menu is opened:

 
.head_logo { 
   display: none !important; 
   } 
   @media (min-width: 1190px) { 
     .head_logo { 
        display: block !important; 
     } 
}

In order for the logo to appear on the mobile device, I add it to the collapsed menu code. The if (file_exists(“images/header.jpg”)) is so that I can simply include the menu files in the WordPress blog subdirectory on my site.

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="container-fluid">
    <div class="row">
      <div class="col col-centered">
        <div class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <?php
          $path = "https://" . getenv('HTTP_HOST');
          if (file_exists("images/header.jpg")) {
            echo "<img src='images/logo.png' alt='Mike&rsquo;s Website Resonsive Renovation and Business Intelligence' width='134'>";
         }
         else {
            echo "<img src=$path/images/logo.png alt='Mike&rsquo;s Website Resonsive Renovation and Business Intelligence' width='134'>";
          }
         ?>
        </div>
      </div>
    </div>
  </div>
</div>

Desktop

Mobile