“Mobile” Bootstrap-Navbar not working

“Mobile” Bootstrap-Navbar not working








Stadtfestlauf – Start











Hallo

sample text


Here’s a my index.html. When I try it out on my mobile, the navigation bar doesn’t work. I searched for missing div’s tags.

Solutions/Answers:

Solution 1:

You need to change the data-targetof your button to the ID of your navbar-collapseelement.

Furthermore your html is missing some closing <li>‘s.

Working Example

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&uuml;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>

Solution 2:

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>

Solution 3:

For my the solution was to add

<meta name="viewport" content="width=device-width, initial-scale=1.0">

References

Related:  Extend the bootstrap-typeahead in order to take an object instead of a string