折叠时引导菜单栏重叠徽标

Question

当导航栏折叠时（当它显示切换图标时），菜单（主页、服务、投资组合、关于、联系人）位于徽标上方。如果我从徽标（nag-bar-brand）中选择位置：绝对，菜单将出现在中心。如果有在标志下方的菜单。我希望你能理解我的问题。英语不是我的第一语言。谢谢你。 HTML

<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">

<div class="container">  

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

<span class="icon-bar"></span>`enter code here`    
<span class="icon-bar"></span>    
<span class="icon-bar"></span>

</button>

<a  href="#"class="navbar-brand"><img id="brand-image" src=""><img src="images/logo.png" class="img-responsive"  alt="website logo"></a>

<div class="collapse navbar-collapse navHeaderCollapse"> 

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

<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>    
<li><a href="#">Portfolio</a></li>    
<li><a href="#">About</a></li>    
<li><a href="#">Blog</a></li>    
<li><a href="#">Contact</a></li>                                    
</ul>

</div>

</div>        
</div><!--end navbar--> 

css:

.navbar {
background-color:#FFF;
border-radius: 0 px;
min-height: 85px;   
}

.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}

.navbar-nav > li{
padding-left:20px;
}

.navbar .nav >li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position:absolute;
}

Answer 1

如果图像太大，就会发生这种情况。用 max-height max-width 限制图像

Answer 2

只需将图像大小设置为 100%。这应该工作！

.img {
img-size:100%;
}