Bootstrap toggle menu not working

Question

I am testing a new website, and I am having a strange issue.

This is the code for the index page:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <!-- Second navbar for categories --> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <li><a href="#">Web design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Print</a></li> <li><a href="#">Motion</a></li> <li><a href="#">Mobile apps</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for sign in --> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Sign in</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse2"> <form class="navbar-form navbar-right form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="Email">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email" autofocus required /> </div> <div class="form-group"> <label class="sr-only" for="Password">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password" required /> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for search --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-3"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse3"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for profile settings --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-4"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse" role="search" id="nav-collapse4"> <li><a href="#">Support</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">My profile</a></li> <li><a href="#">Favorited</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </div><!-- /.container-fluid -->

This is the demo code that is working fine on the demo site, but on my server, the toggle menu is not working.

What is wrong in the code?

Michael Conard · Accepted Answer · 2018-06-18 13:21:19Z

The bootstrap js you include depends on jquery. This means jquery must be included first. I swapped the order of your two includes, and you can see it now works. Always check the dependencies of code you're importing and didn't write yourself!

Feel free to try the fiddle and swap the order back, you will see it breaks. :)

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <!-- Second navbar for categories --> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <li><a href="#">Web design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Graphic design</a></li> <li><a href="#">Print</a></li> <li><a href="#">Motion</a></li> <li><a href="#">Mobile apps</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for sign in --> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Sign in</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse2"> <form class="navbar-form navbar-right form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="Email">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email" autofocus required /> </div> <div class="form-group"> <label class="sr-only" for="Password">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password" required /> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for search --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-3"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a> </li> </ul> <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse3"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </form> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> <!-- Second navbar for profile settings --> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-4"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Works</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li> <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse" role="search" id="nav-collapse4"> <li><a href="#">Support</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">My profile</a></li> <li><a href="#">Favorited</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </div><!-- /.container-fluid -->

Hope this makes sense.

Collectives™ on Stack Overflow

Bootstrap toggle menu not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related