Bootstrap NavBar Max-Height

Question

Я создал навигационное меню с бутстрапом, но, похоже, он странно относится к устройствам> шириной 992. Меню, кажется, теряет цвет фона на последних 3 ссылках, и у него нет полосы прокрутки.

Я создал скрипку navbar fiddle, показывая вам, что я имею в виду. Если ширина ниже 992, меню навигационной панели рушится нормально, однако, как только вы достигнете этого номера устройства магического носителя, навигационная панель теряет способность прокрутки или цвет фона.

Может кто-нибудь посоветует мне, что мне нужно сделать, чтобы исправить это поведение?

<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 не показывается, потому что ваш код navbar-header только в запросе @media (min-width: 768px) {... СМИ. И у вас есть navbar, чтобы спрятаться на средних и больших экранах.

Я разместил вилку here with it showing up on the larger screens.

У вас есть hidden-md hidden-lg в классе для вашего nav в дополнение к тому, что я сказал выше о классе navbar-header, содержащемся только в вашем запросе на медиа.

Чтобы исправить полосу прокрутки, исчезающую на больших экранах, добавьте overflow-y: auto!important; в ваш .navbar-collapse.collapse.in. Это переопределяет выполнение бутстрапа, делая его visible на (min-width: 768px).