Bootstrap 3: How to get other collapsed navbar links under the screen? - css

Question

I have a navbar with many links/options:
When I collapsed it, some options are totally off the screen and I can't click on them:
In the pic, I can see link 4, but not link 5 and link 6.
Using a dropdown menu will do the same thing.
.navbar {
border: 0;
border-bottom: 1px solid #FFF;
background-color: #111 !important;
border-radius: 0px;
}
/* Adjust Toggle button */
.navbar-toggle {
margin-top: 18px;
}
/* Adjust Navbar Height */
.navbar-brand,
.navbar-nav li a {
padding-top: 0;
}
.navbar-brand,
.navbar-nav li a {
color: #FFF !important;
line-height: 70px;
height: 70px;
}
.navbar-brand {
color: #0CF !important;
}
.navbar-brand:hover,
.navbar-nav li a:hover {
background-color: #06C !important;
color: #0f9 !important;
}
.dropdown-menu > li > a {
line-height: 40px;
height: 40px;
}
.navbar-nav .open .dropdown-toggle {
background-color: #222 !important;
}
.navbar div ul li .dropdown-menu {
background-color: #222;
border-top: 2px solid #09f;
}
/* Nav Affix */
nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
.affix + .container {
padding-top: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="308">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-adjust" aria-hidden="true"></i>
Brand
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>Storyline</li>
<li>Characters</li>
<li>Gallery</li>
<!--li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Misc<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About</li>
<li>Contact</li>
<li>Other</li>
</ul>
</li-->
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</div>
</nav>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Something is wrong with your javascript probably. I see there is class .affix-top getting added to the .navbar .navbar-default. Remove that and your nav will scroll properly.