ブートストラップNavBar最大高さ

Question

私はブートストラップ付きのナビゲーションバーメニューを作成しましたが、デバイスの幅が992を超えていると奇妙に動作するようです。メニューは最後の3つのリンクの背景色が失われているようで、スクロールバーはありません。

私は何を意味するのかを示すフィドルnavbar fiddleを作成しました。幅が992を下回ると、navbarメニューはうまく崩壊しますが、その魔法の媒体デバイス番号に達すると、navbarはスクロール能力または背景色を失います。

この動作を修正するために私が何をする必要があるか、誰かに助言してもらえますか？

<nav class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg" id="my-navbar"> 
    <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span style="background-color:white" class="icon-bar"></span> 
       <span style="background-color:white" class="icon-bar"></span> 
       <span style="background-color:white" class="icon-bar"></span> 
       <span style="background-color:white" class="icon-bar"></span> 
      </button> 
     </div><!-- end navbar-header --> 


     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav-body"> 
<li><a href="My Link 1" target="_blank">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
<li><a href="My Link 1" class="">My Link 1</a></li> 
</ul> 
     </div> 

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

MY CSS

header .logo { 
width: 120px; 
height: auto; 
position: absolute; 
display: block; 
margin: 0 auto; 
background: transparent; 
padding-left: 0; 
left: 50%; 
margin-left: -60px; 
transition: all 0.3s ease-in-out 0.05s; 
z-index: 2; 
} 



p, li, h1, h2, h3, h4, h5, h6 { 
font-family:Arial, Helvetica, sans-serif; 
} 

p { 
line-height: 1.5em; 
} 

a, h1, h1, h2, h3, h4, h5, h6 { 
color: #4286f4; 
} 

a:hover {color: #4286f4;} 

h1 { 
font-size: 2em; 
margin: 0.67em 0; 
} 



header .header-social { 
position: absolute; 
display: block; 
width: 25px; 
height: 150px; 
top: 10px; 
right: 15px; 
z-index: 2; 
} 

header .header-social { 
float: right; 
display: inline-block; 
position: relative; 
padding: 15px; 
width: auto; 
top: unset; 
right: unset; 
height: auto; 
} 

header .header-social ul li { 
display: inline-block; 
width: 25px; 
height: 25px; 
border-radius: 50%; 
background-color: #4286f4; 
margin-right: 5px; 
} 

header .header-social ul li a path { 
fill: white; 
} 

button.navbar-toggle {background-color: #4286f4;} 

.navbar-nav {background-color: #fff;} 

.navbar-default .navbar-nav > li > a { 
color: #585960; 
display: block; 
line-height:.8em; 
font-family:Arial, Helvetica, sans-serif; 
text-transform: uppercase; 
font-size: 0.85em; 
background-color: #fff; 
border-style: solid; 
border-color:#cccccc; 
border-top-width: 0px; 
border-left-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 1px; 
} 


.navbar-default .navbar-nav > li > a:hover { 
color: #fff; 
background-color: #4286f4; 
} 

.navbar-brand {height: 70px;} 


ul.nav-body { 
list-style-type: none; 
margin: 0; 
padding: 0; 
background: transparent none repeat scroll 0 0; 



} 

.nav-body > li a { 


color: #585960; 
display: block; 
font-family:Arial, Helvetica, sans-serif; 
font-size: 1.2em; 
font-weight: bolder; 
padding: 10px; 

position: relative; 
text-decoration: none; 
transition: all 0.2s ease 0s; 

border-bottom: 1px solid #f1f1f1; 

overflow: auto; 



} 


.nav-body > li a:hover { 
background-color: #555; 
color: #fff; 
} 


.nav-body > li a.selectedPage { 
background: #4286f4; 
color: #fff; 
} 



@media (min-width: 768px) { 
header .logo { 
left: 0; 
padding-left: 30px; 
width: 180px; 
height: 180px; 
margin-left: 0; 
} 

} 

@media (max-width: 991px) { 
body {padding-top: 70px;} 


.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin: 7.5px -15px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.navbar-text { 
    float: none; 
    margin: 15px 0; 
} 



.navbar-collapse.collapse.in { 
    display: block!important; 
} 


.collapsing { 
    overflow: hidden!important; 
} 


} 

Answer 1

あなたnavbar-headerコードのみ@media (min-width: 768px) {...メディアクエリ内にあるので、あなたのナビゲーションバーが表示されていない理由があります。また、中および大画面で非表示にするためのナビゲーションバーがあります。

私はフォークhere with it showing up on the larger screensを掲示しました。

navのクラスにはhidden-md hidden-lgがあります。上記の内容に加えて、navbar-headerクラスはメディアクエリ内にのみ含まれています。

大きな画面で消えるスクロールバーを修正するには、.navbar-collapse.collapse.inのoverflow-y: auto!important;を追加します。これにより、ブートストラップの実装が上書きされ、(min-width: 768px)のvisibleになります。