Bootstrap Navbar Collapse not working when navbar position is absolute - html

Question

When using position: absolute; the navbar collapse does not work properly. When expanding the menu, the other content is not moved down anymore. Also, the button to expand and collapse is not visible (which is why I have made it gray) and does not appear in the correct position.
HTML code for the navbar:
<nav class="bootstrap-iso navbar navbar-default navbar-absolute">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="bootstrap-iso navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">DEMO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="navbar-right">
<li>Home</li>
<li>Bruid</li>
<li>Bruidegom</li>
<li>De Winkel</li>
<li>Blog</li>
<li>Contact</li>
<li><button class="btn" id="afspraak">AFSPRAAK MAKEN</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
navbar-right li {
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
}
#afspraak {
margin-top: 5%;
background-color: #f5758e;
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
color: white;
}
#navbar-right a {
color: white;
}
.navbar-default .navbar-brand {
color: white !important;
font-size: 36px !important;
}
.navbar-default {
background: transparent !important;
border: none !important;
position: absolute;
}
.navbar-toggle {
background-color: grey !important;
}
Many thanks in advance for your help!

Answer 1

YoungStarDC it happens to the best of us...check the first line of the navbar class. You need to add a '<' everything that's open has to be closed and everything that's closed has to be opened. The button will appear when you change the browsers window size once you do that.
<nav class="bootstrap-iso navbar navbar-default navbar-absolute"></nav>
P.S. Bootstraps navbar-collapse only collapses the navbar and shows the button when the screen is too small to hold the navbar