Сменить логотип, когда navbar рухнул

Question

Я работаю над интерфейсом панели управления на основе Bootstrap v3. Навигатор может быть рухнут, мне было интересно, изменился ли образ логотипа при смене навигационной панели?

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

Любые предложения, пожалуйста.

Спасибо.

Answer 1

Может быть, вы можете скрыть свой «главный» логотип с «скрытым хзом» и ваш «вторичный» логотип скрыт для см и Л.Г. размерами

<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

Вы можете взять изображение и заменить его ДИВ:

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

добавьте медиазапросы

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

Поскольку вы используете PHP для подталкивания исходного кода к изображению, вам нужно будет поместить свой CSS в себя и поместить скрипт на URL-адрес селектора фонового изображения.

В качестве альтернативы, вы можете также использовать эту технику http://littlegreenfootballs.com/article/43278_Tech_Note-_Using_Media_Queries_With_PHP

Если вы собираетесь что маршрут просто установить переменную на вашем IMG SRC, а затем установить переменную с, если/другое заявление, которое он показывает вам на этом сайте.

Надеюсь, это поможет!