CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Scott Fink
Scott Fink

Reputation: 217

can't get twitter bootstrap navbar to work?

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.

Upvotes: 1

Views: 11213

Answers (4)

jorge_ruby
jorge_ruby

Reputation: 1

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>

Upvotes: 0

2oahu.com
2oahu.com

Reputation: 11

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.

Upvotes: 1

Scott Fink
Scott Fink

Reputation: 217

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.

Upvotes: 1

Theo
Theo

Reputation: 2799

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.

Upvotes: 4

Related Questions