Bootstrap dropdowns not working
This is for my navbar. The "about us" dropdown does not work and the toggle button when the window gets smaller is also not.
Here's the code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-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="help.html">Home</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">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ABOUT US <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">DOCTORS</a></li>
<li><a href="#">OUR STAFF</a></li>
</ul>
</li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PAYMENT</a></li>
<li><a href="#">PATIENT FORMS</a></li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
source to share
Have a look at this working jsFiddle .
There is only one mistake in your code: the extra tag </ul>
at the end.
However, this does not cause the issue you are complaining about (dropdown and google button not working). I can only reproduce this if you skip adding the jQuery or JavaScript Bootstrap library (which is used to create these effects and depends on jQuery).
You can get them from the following links:
jQuery: http://code.jquery.com/jquery-2.1.4.min.js
Bootstrap JS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/ bootstrap.min.js
Please note: Bootstrap JS must match the Bootstrap CSS version.
source to share