Why won't my dropdown menu work

JavaScript
1

The following is the code I am using in codepen.io and for the life of me I can’t get my dropdown menu to toggle? Any help?

Home 
<nav class="navbar navbar-fixed-top">
  <div class="container">

    <a class="navbar-brand" href="#">Your Logo</a>

    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li class="dropdown"><a data-toggle="dropdown" href="#">Portfolio<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">home</a></li>
            <li><a href="#">home</a></li>
          </ul>
          
        </li>
        <li>
          <a href="#">About Me</a>
        </li>
      </ul>

      </li>
      </ul>
      <form class="navbar-form pull-left">
        <input type="text" class="form-control" placeholder="Search this site..." id="searchInput">
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
        <!--end button-->
      </form>

      <ul class="nav navbar-nav pull-right">
        <li>
          <a href="#"><span class="glyphicon glyphicon-user"> My Account</a>
        </li>
      </ul>
      <!--end Navbar form--->
    </div>
    <!--end Nav-collapse-->
  </div>
  <!-- end container-->
</nav>
<!--end navbar-->
2

Have you loaded both jquery and bootstrap.js into the JavaScript panel on codepen?

3

Yes, I have them both loaded. That was my first stop as well. I figured the jquery call must be missing.

To no avail…

4

@jlee1215 The order is important too, jQuery must be before the Bootstrap.js . Try building a navbar by copying the bootstrap example just to make sure your environment works. Then I would check your list opening and closing tags. I am commuting on a train now so hard to see with the shaking, but for some reason the opening and closing tags seem off somewhere. Maybe I am not seeing it right, but maybe look again.

8 Likes
5

Take a look at the example on the Bootstrap website. Maybe you’re not using a class or id properly.

6

Can you paste the link to your codepen?

7

Add this right at the bottom of your HTML

`

`
1 Like
8

are you adding your javascript and bootstrap files correctly ? Take a look at this article and make sure you are adding everything correctly. Let me know if this helps :slight_smile:

1 Like
9

@michaelhenderson Nice article, thank you for the link!

1 Like
10

No problem bud! I hope it helps you out !

11

Sorry for the delay, the evenings are harder for me to get online.

This is my codepen. I have inserted following your article Michael and still my dropdown is not working. I am not sure what I am doing wrong but I will keep fighting my way through here. I appreciate all the suggestions. I enjoy the iterative process and each suggestion has helped me learn a little.

12

There are some mistakes in your Javascript that needs to be corrected. The dropdown works after!

In Codepen, there is no need to wrap your JS code in script tags.Also, some things that pop out :

$(’.navbar a, footer a [href’#mypage’]").on(‘click’,function(event){

This line doesn’t work because you mixed quotation marks. If you have any double quotes in your selectors, you need to use single quotes to wrap them :

$(’.navbar a, footer a[href="#mypage"]’).on(‘click’,function(event){

and this :

(this.hash !++"") {

++ is incrementing a value. Here I suppose you wanted to check if hash was an empty string so it should be :

(this.hash !== “”) {

You also got a single quote mark somewhere that is breaking your code on line 9

1 Like
13

Mizu,

Thank you so much. I am more familiar with the HTML side of things so far so the JS was really throwing me. I actually copied that from someone who suggested it. It would have taken me forever to figure that out.

Thank you so much.
Josh

1 Like
14

Compare your navbar with the one from http://getbootstrap.com/components/

You have some important parts missing, such as the ‘hamburger’ icon for when the navbar collapses. I’d recommend reading through the example on the components page and fiddling with it to see what tags and attributes are used for what in the navbar.

There are other issues as well, but I’m on my phone so it’s hard to give a blow-by-blow account :slight_smile:

15

Thank you. I was experiencing the same issue and this worked!

1 Like
16

I was also struggeling to get bootstrap menu working. I loaded bootstrap under css and jquery and bootstrap under javascript. It didnt work. Then i tried to copy and paste older version of bootstrap and jquery in the setting from this other pen http://codepen.io/twittem/pen/lwbjC?editors=1100 and then it finally worked.

17

I had the same issue, the version of bootstrap and jquery were not causing the problem but the order in which I load the libraries made the difference. jQuery library should be added before the bootstrap library.

18

Thanks, you saved me

19

Thanks, the order in codepen threw me for a loop too… Don’t know how long this would have taken to solve without your post! :crazy_face:

20

Thank you. It work for me.