Navbarの高さの変化がアクティブエリアに影響しない

Question

私のロゴをNavbarに入れたいときは、ページ上部の固定navbarの高さを80pxに増やしました。問題は、アクティブに選択された領域の高さがナビゲーションバーで変更されていないことです。

screencap of affected area

マイHTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img src="./img/logo.png" alt="logo"/> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="./index.html">Home</a></li> 
     <li><a href="./about-us.html">About Us</a></li> 
     <li><a href="./products.html">Products</a></li> 
     <li><a href="./contact.html">Contact</a></li> 
     <li><a href="./jobs.html">Jobs</a></li> 
     <li><a href="./clients.html">Clients</a></li> 
    </ul> 
    </div> 
</nav> 

bootstrap.cssを上書きマイカスタムCSS：

.navbar { 
    min-height: 80px; 
} 

.navbar-brand { 
    height: 80px; 
} 

Answer 1

を知っている必要がありますこのペンで

.navbar-header { 
    position: relative; 
} 
.navbar-brand { 
    position: absolute; 
    top: 0; 
    height: 80px; 
    background-color: red; 
} 

例：このような絶対位置Absolute Position

は、exしたい場合navbarの高さをnavbarの高さで調整し、デフォルトのpaddingを ".nav.navbar-nav"要素のリンクから調整する必要があります。これを行う最も簡単な方法は、独自のブートストラップ変数を使用するgulpのようなプリコンパイラを使用すること、またはブートストラップからカスタマイズページ上の変数を少なくするデフォルトのブートストラップを調整することです。このペンでCustomize Boostrap

例：Same height of logo and navbar

Answer 2

外側のdiv（.navbar）は（内部1以上の優先度を持っています.navbar-brand）の場合、要素を調べると、 "height：80px"の取り消し線が表示されることがあります。 てみてください「！重要な」

Answer 3

あなたはナビゲーションバー・ブランド（ロゴ）は、あなたが使用できるナビゲーションバーに重なっていることを希望の場合はあなたが正確にどのようにブートストラップ作品（CSSファイルを見て）

.navbar { 
     min-height: 80px; // Default 50px 
    } 

    .navbar-brand { 
     height: 80px; 
    } 
    .navbar-nav > li > a { 
     padding-top: 30px; // Default 15px 
     padding-bottom: 30px; // Default 15px 
    } 

Answer 4

あなたは彼らが水平メニューとして表示されたときにロゴやナビゲーションボタンが同じ高さになりたい場合は、以下のCSSには、使用することができるものです。

@mediaこのルールは、ナビゲーションメニューがこれらのデバイスで垂直モードで表示されるため、小さな画面デバイス（携帯電話など）には適用されないため、追加のボタンを表示したくないというルールがあります縦のメニューでは高さ。

@media screen and (min-width:768px) { 
    .navbar { 
    min-height: 80px; 
    } 
    .navbar-brand { 
    height: 80px !important; 
    } 
    .nav>li>a { 
    padding: 15px 30px !important; 
    line-height: 50px !important; 
    } 
} 

http://codepen.io/anon/pen/ezZxJw

このような