当导航栏折叠时更改徽标

我正在基于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">

请任何建议。

谢谢。

来源

2015-07-21 Jay Bowman

您应该提供一些代码，以便在正确的上下文中回答问题更加容易。 –

@ himanish.k我已更新代码！ :) –

也许你可以隐藏你的“主”标识与“隐XS”和你的“次要”的标志被隐藏SM和LG尺寸

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

来源

2015-07-21 22:23:29 Elyass

你可以拿出你的形象，并用其替换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; 
}

添加您的媒体查询

@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上。

或者，你也可以。如果你要这条路线只设置你的IMG SRC一个变量，然后用if/else语句，他会显示在该网站上设置的变量使用这种技术http://littlegreenfootballs.com/article/43278_Tech_Note-_Using_Media_Queries_With_PHP

。

希望这会有所帮助！

来源

2015-07-21 22:54:26

当导航栏折叠时更改徽标

回答

相关问题