Bootstrap nav bar collapsing - html

Question

i'm working on upgrading a website so it becomes responsive. I'm using twitter bootstrap. I already tried a couple of different nav bar templates that i found online and i always have the same problem. As you can see in the images in some resolutions the nav bar isn't collapsing the way it should.
The problem:
The navbar html code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.htm">Index</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I also have this in my css:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Any help would be appreciated!

Answer 1

This is the complete CSS (*taking into account your site structure) if you want to change your breakpoint for the navigation on smaller viewports.
You should also consider moving some of your links into dropdown lists which would allow you to avoid all of this.
#media (max-width: 1199px) {
#custom-bootstrap-menu .navbar-collapse.collapse {
display: none !important;
}
#custom-bootstrap-menu .navbar-collapse.collapse.in {
display: block !important;
}
#custom-bootstrap-menu .navbar-toggle {
display: block !important;
}
#custom-bootstrap-menu .navbar-collapse {
text-align: center;
display: block !important;
}
#custom-bootstrap-menu .navbar-header {
float: none;
display: block !important;
}
#custom-bootstrap-menu .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
#custom-bootstrap-menu .navbar-nav > li {
float: none;
}
#custom-bootstrap-menu .navbar-nav> li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>
<img src="http://www.huisjeinportugal.nl/images/top.jpg" class="img-responsive">
</p>
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div>
</div>
</div>

Answer 2

It looks like your navigation is fairly wide, so what you could do is simply change when the bootstrap nav collapses. Looking at your code, 1000px seems to be a good breaking point for the collapse to happen, but you can play around with that.
One solution would be to go and add a new media query that will overwite that of Bootstraps. This solution would be fine if you don't want to edit your bootstrap code directly:
#media (max-width: 1000px) {
.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;
}
}
Another, easier option, if you are using LESS is to change the variables that trigger the breakpoint. You could instead use something along these lines:
// Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: 1000px;