CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
tanyamonika
tanyamonika

Reputation: 13

Navbar toggle button and dropdown menus not working

I have created a navbar but it doesn't seem to be responsive. It only works to the extent that the toggle button appears, but nothing happens when clicked. Also, the dropdown menu has no effect. I've tried various solutions mentioned on other posts but nothing seems to be working.

I've included the scripts I've linked to at the end. Please help me identify where it's going wrong

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
    <!-- Brand and toggle grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <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">GrapeVine</a>
          </div>

          <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="#areas" class="dropdown-toggle" data-toggle="dropdown">Areas<b class="caret"></b></a>
              <ul class="dropdown-menu">
                    <li><a href="#North">North</a></li>
                    <li><a href="#East">East</a></li>
                    <li><a href="#South">South</a></li>
                    <li><a href="#west">West</a></li>
              </ul>
              </li>
              <li><a href="#about">About</a></li>
            </ul>
          </div>
      </div>
    </nav>


<script src="/js/myjQuery.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootsrap.min.js" type="text/javascript"></script>

Upvotes: 1

Views: 816

Answers (2)

Marcin Restel
Marcin Restel

Reputation: 280

You have got "bootsrap" instead of "bootstrap" in your script source:

<script src="/js/bootsrap.min.js" type="text/javascript"></script>

Upvotes: 0

Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

I think your problem is in your script source

replace this 

/js/bootsrap.min.js

to

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Upvotes: 1

Related Questions