CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3
Marina Tassi
Marina Tassi

Reputation: 1

Dropdown in Bootstrap menu not working

I suspect that I'm not correctly implementing the javascript bootstrap file, since the dropdown menu isn't working. Currently, I have bootstrap saved to my project folder. I looked at other working example code (even tried copying and pasting it as a test) and the menu just won't drop down.

Here's my code

<head>
  <link rel = "stylesheet" type = "text/css" href = "index.css">
  <link href = "bootstrap-3.3.6-dist/css/bootstrap.css" rel = "stylesheet">
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Plethora</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a>
          <ul class="dropdown-menu">
           <li><a href="#">Manage Interests </a></li>
           <li><a href="#">Account Settings </a></li>
           <li><a href="#"></a>Email Settings </li>
         </ul>
        </li>
      </ul>
    </div>
  </nav>

  <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
</body>`

Upvotes: 0

Views: 218

Answers (2)

michael
michael

Reputation: 758

You're using relative paths for your CSS and JS files instead of absolute.

For example, bootstrap-3.3.6-dist/css/bootstrap.css is relative to whatever page you're on, so if you're on example.com/ice/cream, the page is actually trying to load example.com/ice/cream/bootstrap-3.3.6-dist/css/bootstrap.css for your CSS file. If you use /bootstrap-3.3.6-dist/css/bootstrap.css for your CSS, it will always load from example.com/bootstrap-3.3.6-dist/css/bootstrap.css regardless of what page you're on.

Switch out the relative paths you have for all your CSS and JS, and you should be good be to.

EDIT: As another poster pointed out, you also don't appear to have jQuery on the page, which is required for most Bootstrap functionality to work.

Upvotes: 0

NikolaiDante
NikolaiDante

Reputation: 18649

The markup works ok. Check your browser console for any 404s when retrieving either the CSS or JS, or get them from a CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Also, you are missing JQuery from the example code you've posted, this should go before the bootstrap JavaScript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Example of console, Firebug in FireFox, check for your script files 404ing in here:

enter image description here

Full Working Example, using CDNs:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Plethora</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img id = "menu" src="nav-icon.png"> </a>
          <ul class="dropdown-menu">
           <li><a href="#">Manage Interests </a></li>
           <li><a href="#">Account Settings </a></li>
           <li><a href="#"></a>Email Settings </li>
         </ul>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

(runnable JSFiddle, note the 3 external resources (Bootstrap CSS and JS and JQuery)

The only thing not in the above, is your site CSS, so it may be worth trying without that on the off chance something there is interfering, if all else fails.

Upvotes: 0

Related Questions