1

I've looked through a bunch of tutorials, and I've read a bunch of answers to questions on here. I can't figure out what's going on. I am linking to bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery, and bootstrap-dropdown.js, in that order. When I click on each from the page source, it shows up correctly. When I click the dropdown, however, nothing happens. Here's the html code for that:

<!--begin bootstrap navbar-->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="/signup/index">Sign Up</a></li>
                <li class="dropdown">
                    <a href="/signup/index" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                         <li><a href="/mypage">my page</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--/end bootstrap navbar-->

If anyone has any ideas, let me know.

1
  • Do you have an example of the failure online anywhere? Could you perhaps use jsfiddle.net or jsbin.com to illustrate the problem?
    – Chris
    Jul 22, 2012 at 3:20

4 Answers 4

4

A very common issue is the order that you load the javascript files. You have to load jquery before bootstrap javascript file. CSS file order doesn't matter.

EDIT

It worked when I copy-pasted your code, and changed the href in this line from "/signup/index" to "#"...

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

See... enter image description here

Bootstrap menus activate with a click (rather than hovering), and if the link actually leads somewhere it'll skip dropping the menu down and navigate instead.

5
  • i changed the order, same result. It's just linking to /signup/index.
    – Scott Fink
    Jul 22, 2012 at 3:22
  • No idea what the issue is then. this is driving me nuts
    – Scott Fink
    Jul 22, 2012 at 3:41
  • hmm, I just moved the file outside of my CodeIgniter set up and it worked. I wonder what would be the reasoning for that?
    – Scott Fink
    Jul 22, 2012 at 3:44
  • Is it not clear? The Login hyperlink does not show the dropdown menu because you have it linked to another page. So it will navigate to "/signup/index" rather than show the dropdown menu. Change the href attribute from href="/signup/index" to href="#" for the Login hyperlink. Bootstrap drop down menu's have to have href="#".
    – Theo
    Jul 22, 2012 at 3:47
  • I'm not familiar with codeigniter. But I'm glad it's working for you now.
    – Theo
    Jul 22, 2012 at 3:48
1

You should only link EITHER bootstrap.js or bootstrap-dropdown.js. Apparently, it can create some conflicts, because this is the only thing I had to change. I have done this previously without issues, however.

1

I had a similar issue, where the navbar dropdown wouldn't react when I clicked on it. I was trying to adopt http://twitter.github.io/bootstrap/examples/starter-template.html to my design.

Ultimately the issue missing jquery.js.

Here's the piece of code looking for jquery.js.

<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>

After I copied in the missing jquery.js to proper folder, everything worked fine.

0

Bootstrap Nav-Bar Template with React:

Similar issues with the drop down on mobile view not clicking the drop down..Just missing lines I took from w3c.. ajax was missing.:

Reference____ https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

CODE BELOW GOES IN YOUR HTML HEADER

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.