モバイルNavbarに関する問題

Question

編集＃1：高さを89pxに設定した後、モバイルメニューが自分のコンテンツより遅れているようです。

私は私のナビゲーションバーのモバイル版で問題を抱えています。 navbarはロゴほどの高さではないので、私がクリックすると "Home"メニュー項目は表示されません。ここで

は私のHTMLです：：

は、ここでは両方の問題のために絵をう

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <a class="navbar-brand " style="margin-top: -15px; float: left;" href="#"> 
       <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> 
       </a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 
      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Internet</a></li> 
        <li><a href="#">Phone</a></li> 
        <li><a href="#">Android TV</a></li> 
        <li><a href="#">Shaw Direct</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

そして、ここに私のCSSです：

.navbar-default { 
    background-color: #00AEFE; 
} 

.nav.navbar-nav li a{ 
    color: white; 
    font-size: 18px; 
    line-height: 50px; 
} 
.col-xs-0 { 
    display: none; 
} 
nav { 
    height: 89px; 
} 

Answer 1

も<img>のheightがnavbar-brand img {height:40px}のような追加のCSSによって制御されなければならない、いくつかのパディングを持っています。

ライブhtmlが表示されていればいいですね。

EDITED

使用このCSSは100pxに以上のようなイメージの高さよりも長く、いくつかの高さを与えるために

@media (min-width: 768px) { 
    .navbar-header { 
     height: 100px; 
    } 
    } 

OR あなたはの高さを変更したくない場合navbar-headerを使用すると、navbar-toggleボタンにいくつかのパディングを追加できるので、navbar-headerの高さが追加されます：

@media (min-width: 768px) { 
    .navbar-toggle { 
     padding: 33px 10px; 
    } 
    } 

Answer 2

<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#"> 
      <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> 
</a> 

変更は、ブートストラップnavbar-brandでナビゲーションバーブランドのクラスの高さ

OR

<style> 
    .navbar-brand img { 
    max-height: 40px; 
    width: auto; 
    } 

    </style>