如何替換offcanvas圖像？

Question

我在建立一個菜單，當我想在大屏幕上顯示一個完整的logo時，如果圖片是offcanvas，那麼在一個簡短的logo（只有產品的品牌形象）。

我目前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>標記？

感謝您的幫助。

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