将一个超大的徽标图像添加到引导程序中的固定底部导航栏中

我试图在固定底部的导航栏上添加一个徽标作为品牌。徽标比导航栏本身大。我希望它重叠身体，但它挂在链接的顶部。将一个超大的徽标图像添加到引导程序中的固定底部导航栏中

我不知道要改变什么样的元素。

.navbar { 
height:72px; 
background: transparent; 
background-image: url("../images/nav-bkgd.png"); 
background-repeat: repeat-x; 
border: 0; 
text-transform: uppercase; 
font-family: "Bangers","Helvetica Neue",Helvetica,Arial,sans-serif; 
letter-spacing: 2px; 
padding-left: 35px; 
padding-right: 35px; 
} 


.navbar-fixed-bottom { 
position: fixed; 
right: 0; 
left: 0; 
z-index: 1030; 
} 

.navbar-fixed-bottom { 
    font-size: 2em; 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    transition: all .3s; 
} 

<body>

<div class="container"> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src='assets/images/logo.png'</a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

      <ul class="nav navbar-nav navbar-right"> 

       <li> 
        <a class="page-scroll" href="#">TROPOSHPERE</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#">STRATOSPHERE</a> 
       </li> 

       <li> 
        <a class="page-scroll" href="#">MESOSPHERE</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#">THERMOSPHERE</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#">EXOSPHERE</a> 
       </li> 
      </ul> 
     </div> 

    </div> 

</nav>

来源

2015-04-05 Harry Robinsob

尝试

.navbar-brand img { 
    margin-top: -16px; 
}

我只是把-16px随机测量，但调整它以符合你当然要什么。

而且链接中的img标签未关闭（丢失/>）

来源

2015-04-06 01:46:29 wunth

谢谢！效果很好 – 2015-04-06 02:00:47

将一个超大的徽标图像添加到引导程序中的固定底部导航栏中

回答

相关问题