Change logo when changing navigation bar

Question

I am working on a control panel interface based on Bootstrap v3. The navigation panel can be minimized, I was wondering if the image of the logo changed when changing the navigation panel?

<div class="topbar">
            <div class="topbar-left">
                <div class="text-center">
                    <a href="" class="logo"><img src="<? echo $appUrl ?>/system/assets/img/logo.png" height="40px"></a>
                </div>
            </div>
            <!-- Button mobile view to collapse sidebar menu -->
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div class="">
                        <div class="pull-left">
                            <button class="button-menu-mobile open-left">
                                <i class="fa fa-bars"></i>
                            </button>
                            <span class="clearfix"></span>
                        </div>

                        <ul class="nav navbar-nav navbar-right pull-right">
                            <li class="dropdown">

Any suggestions please.

Thank.

Answer 1

Perhaps you can hide your "main" logo with "hidden-xs", and your "secondary" logo is hidden for sm and lg sizes.

<div class="col-sm-x hidden-md hidden-lg">
   <img src="mainLogo.gif" alt="main">
</div>
<div class="hidden-sm col-md-x col-lg-x">
   <img src="secondaryLogo.gif" alt="secondary">
</div>

Answer 2

You can take out your image and replace it with a div:

<a href="" class="logo">
  <div id="responsivelogo">
  </div>
</a>

CSS

#responsivelogo {
  display: inline-block;
  background-image: url("path/to/logo1.png");
  background-position: center center;
  background-size: cover;
  height: 40px;
}

Then add your media queries

@media (max-width: 768px){
/*Unless you changed the collapse point, this is the default*/
#responsivelogo {
    background-image: url("path/to/logo2.png");
 }
}

PHP, , CSS script URL- .

http://littlegreenfootballs.com/article/43278_Tech_Note-_Using_Media_Queries_With_PHP

, img src, if/else, .

, !