Как заменить изображение offcanvas?

Im создание меню, где я хочу иметь полный логотип, когда на большом экране и короткий логотип (только с изображением бренда продукта), если изображение offcanvas.

Мой текущий SCSS:

#header {
  background-color: $header-bg;
  z-index: 1001;
  @include transition(right .25s $ease-in-circ, padding-right .25s $ease-in-circ);

  .branding {
    background-color: $sidebar-bg;
    width: 250px;
    height: 45px;
    float: left;
    padding: 0 15px;

    img.brand {
      color: white;
      padding-left: 10px;
      padding-top: 10px;
      height: 40px;
      float: left;
      @include transition(none);

      &:hover {
        text-decoration: none;
      }
    }

    .offcanvas-toggle {
      color: white;
      margin-left: 5px;
      opacity: .5;
      padding: 1px 4px;
      font-size: 18px;

      &:hover {
        opacity: 1;
      }
    }
  }

И HTML элементы:

<header class="clearfix">

  <!-- Branding -->
  <div class="branding {{main.settings.brandingColor}}">
        <img src="/app/images/logo.png" class="brand" ui-sref="app.dashboard" alt="MyApp">
    <a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a>
  </div>
  <!-- Branding end -->
</header>

Как это сейчас, если я сжимаю окно, оригинальный логотип остается там. Где я должен поместить альтернативный логотип ? В другой <img>бирке ?

Спасибо за помощь.

1 ответ

  1. Прежде всего, небольшая вещь, которую вы не заметили в своем коде. В SCSS, вы упомянули #header. Но в html нет idатрибута. В любом случае, в моем фрагменте ниже я удалил переменные цвета фона и переходы к упрощению кода. Фрагмент поддерживает только css. Поэтому мне нужно было добавить предварительно обработанный css.

    #header .branding {
      float: left;
      padding: 0 15px;
    }
    #header .branding .brand {
      width: 250px;
      height: 45px;
      color: white;
      padding-left: 10px;
      padding-top: 10px;
      float: left;
    }
    #header .branding .brand:hover {
      text-decoration: none;
    }
    @media (max-width: 800px) {
      #header .branding .brand {
        display: none;
      }
    }
    #header .branding .sml-brand-img {
      display: none;
    }
    @media (max-width: 800px) {
      #header .branding .sml-brand-img {
        display: block;
        width: 50px;
        height: 45px;
      }
    }
    #header .branding .offcanvas-toggle {
      color: white;
      margin-left: 5px;
      opacity: .5;
      padding: 1px 4px;
      font-size: 18px;
    }
    #header .branding .offcanvas-toggle:hover {
      opacity: 1;
    }
    <header id="header" class="clearfix">
      <!-- Branding -->
      <div class="branding">
        <img src="http://lorempixel.com/250/45/" class="brand" ui-sref="app.dashboard" alt="MyApp">
        <img src="http://placekitten.com/50/45" class="sml-brand-img" alt="MyApp">
        <a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a>
      </div>
      <!-- Branding end -->
    </header>