"Mobile" Bootstrap-Navbar not working
It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
For my the solution was to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You need to change the data-target
of your button to the ID of your navbar-collapse
element.
Furthermore your html is missing some closing <li>
's.
Change your nav code to this:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active"><a href="./Index.html">Startseite</a></li>
<li><a href="./Rueckblick.html">Rückblick</a></li>
<li><a href="./Wettbewerb.html">Wettbewerb</a></li>
<li><a href="./anmelden.html">Anmelden</a></li>
<li><a href="./sponsoren.html">Sponsoren</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>